时间戳

首页 > 解决方案 > 尝试创建 ul 元素，然后使用 JavaScript 使用 ul 父级创建 li 子元素

javascript - 尝试创建 ul 元素，然后使用 JavaScript 使用 ul 父级创建 li 子元素

问题描述

我是 JavaScript 新手，所以我想先学习这些概念，这就是为什么我要附上两个代码示例，我想知道为什么第二个示例不起作用。

问题是： 当我尝试使用示例 2附加li元素时，它不起作用，但为什么呢？

样品 1

<body>
    <h1>This is my List </h1>
    <button onclick="j()">click me</button>
    <script>
        function j()
        {
            var ul = document.createElement('ul');
            ul.innerHTML = 'List:'
            document.body.appendChild(ul);

            let u = document.createElement('li');
            u.innerHTML = 'person';
            ul.appendChild(u);
        }
    </script>
</body>

样品 2

<body>
    <h1>This is my List </h1>
    <button onclick="j()">click me</button>
    <script>
        function j()
        {
            var ul = document.createElement('ul');
            ul.innerHTML = 'List:'
            document.body.appendChild(ul);

            let u = document.createElement('li');
            u.innerHTML = 'person';
            document.getElementsByTagName("ul").appendChild(u);  //ul here is the one created within the function.
        }
    </script>
</body>

标签： javascripthtml

解决方案

document.getElementsByTagName()返回一个集合。

所以你的代码应该假设你的文档中document.getElementsByTagName("ul")[0].appendChild(u)只有这个。<ul>

您可以document.querySelector("ul")改为使用来查找特定元素。

旁注：ul.innerHTML = 'List:'是无效的 HTML，<ul>的 HTML 应该只包含<li>元素。

你可以这样做，ul.innerHTML = '<li>List:</li>'或者你应该考虑使用另一个元素<h1>来保持标题。

推荐阅读