1

下面的代码按预期工作。

CloneNode.js

<!DOCTYPE html>
<html>
        <body>
            <script src="../js/CloneNode.js">
            function myFunction(){
                var the_node = document.getElementById("myList").lastChild;
                var the_clone = the_node.cloneNode(true);
                document.getElementById("myList").appendChild(the_clone);
                }
            </script>
            <ul id="myList">
            <li>Good morning</li>
            <li>Hello</li></ul>
            <p>Click on the button to CloneNode()</p>
            <button onclick = "myFunction()">Copy it!</button>
    </body>
</html>

以下代码也可以正常工作：

<ul id="myList"><li>Good morning</li>
<li>Hello</li></ul>

或者

<ul id="myList"><li>Good morning</li><li>Hello</li></ul>

但是当我在上面的 HTML 代码中输入换行符时</ul>，如下所示，我没有得到输出。因此，没有<li>在网页上添加元素。

<ul id="myList">
<li>Good morning</li>
<li>Hello</li>
</ul>

HTML 代码中的缩进如何影响输出？或者有什么我错过的吗？

4

2 回答 2

5

Element.lastChild返回TextNode节点以及Element节点，新行字符在查询时被解析为空TextNode，因此要使其正常工作，请更改

var the_node = document.getElementById("myList").lastChild;

至

var the_node = document.getElementById("myList").lastElementChild;

于 2017-05-14T08:17:50.840 回答
0

`尝试将所有这些作为该函数的局部变量放在同一个函数中。

  1. const new_item = getElementById(elementID) // 要克隆的元素。
  2. 常量 cln = new_Item.cloneNode(true);
  3. getElementById(elementID).appendChild(cln) // 您要追加新克隆的那个元素。

// 我在存在 3 的函数中声明并初始化了 1 和 2。`

于 2019-12-02T13:22:22.187 回答