当我用javascript css创建ul标签时不起作用[关闭]

Question

代码在哪里： TestArea

当我创建 ul 元素时，为它们设置的 css 不起作用... 有没有另一种设置css的方法？

这是创建元素时不起作用的css：

ul li{
    list-style-type: none;
    float: left;
    width: 13%;
    text-align: center;
    margin-left: 7px;
    height: 20px;
    line-height: 20px;
}

似乎它可以与其他标签一起使用，问题仅在于 ul.....

Answer 1

您的li 标签根本不在您的ul 内，因此您的选择器不匹配。 我用一个可能的解决方案更新了你的小提琴：http://jsfiddle.net/tjuu79mu/1/

function drawDays() {
    var x = document.getElementById("innerElement");
    var html = "";
    html += "<ul>"
    for (var i = 0; i < 7; i++) {
       html += "<li>" + "nonononono" + "</li>";
    }
    html += "</ul>";
    x.innerHTML = html;
}

drawDays();

Answer 2

问题：

当您将<ul> 添加到innerHMTL 时，浏览器会将其变成一个完整的元素。这意味着所有li 元素都不会添加到内部，而是添加到ul 之后。这就是 CSS 选择器不匹配的原因。当您右键单击其中一个元素并选择“检查元素”时，您可以看到这一点。您将看到 li 元素及其兄弟元素的 html，前面是一个空的 <ul</ul>。

解决方案：

仍然使用innerHTML 的一个简单修复方法是生成字符串中的所有html 并立即插入。这可能也更有效，因为它只会触发对 DOM 的一次更改。

function drawDays() {
    var x = document.getElementById("innerElement");
    var items = "";
    for (var i = 0; i < 7; i++) {
        items += "<li>" + "nonononono" + "</li>";
    }
    x.innerHTML = "<ul>" + items + "</ul>";
}

drawDays();

或者，您可以使用document.createElement() 甚至像 jQuery 这样的库来帮助您插入 HTML，但是对于这样的简单任务，innerHTML 就可以了。

Answer 3

尝试使用document.createElement() 创建 HTML 元素。您的代码没有有效地将正确的元素附加到正确的父级中，并且您创建 HTML 的方式使其更难调试。这是一个更新的 JSFiddle：http://jsfiddle.net/tjuu79mu/2/

function drawDays() {
    //get the containing element
    var x = document.getElementById("innerElement");
    //create and append the list element to the container
    var ul = document.createElement('ul');
    x.appendChild(ul);

    for (var i = 0; i < 7; i++) {
        // create an element, add some text content to it, then append it to the list element
        var li = document.createElement('li');
        li.innerText = 'testing testing';
        ul.appendChild(li);
    }
}

drawDays();