Question

此代码的目的是显示无序的HTML元素列表，但是由于某些原因，它似乎不起作用。

我正在使用Sublime Text编写脚本和HTML代码。我试图通过Chrome开发者控制台执行脚本，但该脚本也不起作用。

// 1) Crear una lista desordenada con 10 elementos dentro usando un bucle for.
//    Tener en cuenta que solo se le puede hacer un único appendChild al ul creado, 
//    asi minimizamos el tiempo de modificaciones en el DOM.

var list = document.createElement('ul');
var elements = document.createDocumentFragment();

for (var i = 0; i < 10; i++) {
  let element = document.createElement('li');
  element.innerText = "Elemento " + i;
  elements.appendChild(element);
}

list.appendChild(elements);
document.body.appendChild(list);

Answer 1

确保您的脚本标签在正确的位置。

<head>或<body>中的JavaScript您可以在HTML文档中放置任意数量的脚本。可以将脚本放在HTML页面的<body>或<head>部分中，或同时放置在这两个页面中。

<!-- index.html -->
<html>
    <head>
        <title>Your Page</title>
        <script type="text/javascript">
           // javascript goes here
        </script>
    </head>
    <body>
        <div>Your body goes here.</div>
    </body>
</html>

var list = document.createElement('ul');
var elements = document.createDocumentFragment();

for (var i = 0 ; i < 10 ; i++) {
    let element = document.createElement('li');
    element.innerText = "Elemento " + i;
    elements.appendChild(element);
}

list.appendChild(elements);
document.body.appendChild(list);

在我们这端工作正常。

Answer 2

当您在加载DOM之后通过函数执行相同的操作时，它会起作用。否则会在控制台（Chrome中为F12）中给出此错误，否则-

Uncaught TypeError: Cannot read property 'appendChild' of null

这可能是因为在脚本的初始执行期间DOM不可用，因此该节点不可用于“ appendChild”函数调用。

检查一下，我正在通过可以正常工作的函数调用相同的代码-

<html>
<script> 
    //var list = document.getElementById('test');
    //var elements = document.createDocumentFragment();
    console.log(list);
    for (var i = 0 ; i < 10 ; i++){
       /* let element = document.createElement('li');

        element.innerText = "Elemento " + i;
        console.log(i);*/

        var node = document.createElement("LI");                 // Create a <li> node
        var textnode = document.createTextNode("Water");         // Create a text node
        node.appendChild(textnode);                              // Append the text to <li>
        document.getElementById('myList').appendChild(node);
    }

    //list.appendChild(elements);

    //document.appendChild(list);
     function myFunction() {
            var node = document.createElement("LI");
            var textnode = document.createTextNode("Water");
            node.appendChild(textnode);
            document.getElementById("myList").appendChild(node);
        }

</script>
<body>
    <button onclick="myFunction()">Try it</button>
    <ul id="myList">
      <li>Coffee</li>
      <li>Tea</li>
  </ul>
</body>
</html>

希望这会有所帮助！

JavaScript脚本未运行？

2 个答案: