Question

JavaScript代码：

   <script type="text/javascript">
                var listitems = document.getElementsByTagName('ul')[0];
                var newListItem = document.createElement('li');
                var newListItemText = document.createTextNode('Tutorials');
                newListItem.appendChild(newListItemText);
                listitems.appendChild(newListItem);

            </script>

HTML代码：

        <body>
        <div class="2div">
        <div id="navigator">
            <nav >
                <ul class="nav_menu">
                    <li><a href="/homepage.html">Home</a></li>
                    <li><a href="/Projects.html">Projects</a></li>
                    <li><a href="/Contact.html">Contact Info</a></li>
                </ul>
            </nav>
        </div>

        <div id="aboutme">
            <body>
                <p> This section will contain basic info about me</p>
            </body>
        </div>


    </div>

我在Chrome控制台上收到的错误是：

Uncaught TypeError: Cannot read property 'appendChild' of undefined

Answer 1

您可能在HTML之前加载了js文件，因此ul元素尚未呈现。

您可以使用jQuery的$(document).ready(function(){..Your code})来修复它。

Answer 2

只需添加onload函数，因为您正在处理尚未在DOM中的HTML元素：

window.onload = function foo() {

var listitems = document.getElementsByTagName('ul')[0];
                var newListItem = document.createElement('li');
                var newListItemText = document.createTextNode('Tutorials');
                newListItem.appendChild(newListItemText);
                listitems.appendChild(newListItem);

}

在此处查看结果：https://jsfiddle.net/vdf61qnw/

Answer 3

你的html中没有'ul'所以

document.getElementsByTagName('ul')[0] == null

因此，listitems为null，无法追加到。这应该附加你创建的JavaScript元素：

   <script type="text/javascript">
            var body = document.getElementsByTagName('body');
            var listitems = document.createElement('ul');
            var newListItem = document.createElement('li');
            var newListItemText = document.createTextNode('Tutorials');
            newListItem.appendChild(newListItemText);
            listitems.appendChild(newListItem);
            body.appendChild(listitems);
   </script>

这里的JavaScript脚本代码有什么问题？

3 个答案: