Question

为什么这不起作用？看起来很简单。我在控制台中收到此错误。我正在尝试使用数组中的值填充无序列表。

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="intro.js"></script>
    </head>

    <body>
        <div id="container">
            <div id="main">
                <ul id="menu"></ul>
            </div>
        </div>
    </body>
</html>

JS：

var container = document.getElementById("container");
var menuItems = ["Home","About","Contact Us", "Sign in"];

$(document).ready(function (){
    console.log("Populating menu");
    var elem = document.getElementById('menu');

    for(var i=0;i<menuItems.length;i++){

        elem.appendChild("<li id='" + menuItems[i] + "'>" + menuItems[i] + "</li>" );       
    }
    console.log('menu populated.');
});

Answer 1

如果您想坚持使用100％JavaScript，请使用document.createElement("li")

Here's a jsfiddle

var ul = document.getElementById("myID")
for (var i = 0; i < 10; i++){
    var li = document.createElement("li");
    li.setAttribute("id", "myLI" + i);
    li.innerText = "Hello " + i
    ul.appendChild(li)
}

Answer 2

坚持使用jQuery，appendChild不接受字符串，只接受节点

$(document).ready(function (){
    var container = $("#container"),
        elem      = $('#menu'),
        menuItems = ["Home", "About", "Contact Us", "Sign in"];

    $.each(menuItems, function(idx, item) {
        $('<li />', {
            id   : item.replace(/\s+/,'_'), // no spaces here
            text : item
        }).appendTo(elem);
    });
});

appendChild出错 - 尝试在不存在的上下文中引用节点

2 个答案: