Question

下面的代码按预期工作。

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>

OR

<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代码中的缩进如何影响输出？还是有什么我错过的？

Answer 1

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

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

到

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

Answer 2

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

const new_item = getElementById（elementID）//要克隆的元素。
const cln = new_Item.cloneNode（true）;
getElementById（elementID）.appendChild（cln）//要向其添加新克隆的元素。

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

JS和HTML - cloneNode（）不起作用

2 个答案: