Question

我是初学java脚本学习者，并遵循一些在线教程进行改进。我不太清楚为什么我的代码不起作用，当我打开Chrome开发工具时，我没有看到任何错误？如果有人能告诉我我在这里做错了什么，我将非常感激。记录后我感到不安，我意识到在var the_node= document.getElementById("hh").lastChild;中，the_node仍未定义

<doctype! html>
<html>
<head>
    <title>clone a node</title>
    <script>
        function cloneNode1() {
            var the_node= document.getElementById("hh").lastChild;
            var cloned_node = the_node.cloneNode(true);
            document.getElementById("hh").appendChild(cloned_node);
        }   
    </script>
</head>
<body>
    <h1>welcome to Sarah's page</h1>
    <h2>here is the list of things which I really like</h2>
    <ul id="hh">
        <li>painting</li>
        <li>cooking</li>
    </ul>
    <p>click on the buttom to add to the list</p>
    <button onclick="cloneNode1()"> click me to colne</button>
</body>
</html>

Answer 1

问题是element.lastChild返回最后一个子节点，无论它是元素节点，文本节点还是注释节点。在您的情况下，它返回包含换行符的文本节点。元素内的空格被视为文本，文本被视为节点。

为了使其更清晰，如果您删除hh元素中的所有空格，它将起作用：

＆＃13;

function cloneNode1() {
  var the_node= document.getElementById("hh").lastChild;
  var cloned_node = the_node.cloneNode(true);
  document.getElementById("hh").appendChild(cloned_node);
}

＆＃13;

<ul id="hh"><li>painting</li><li>cooking</li></ul>
<button onclick="cloneNode1()"> click me to colne</button>

＆＃13;

但是，您不需要这样做。如果要提取最后一个子元素，则只需使用 element.lastElementChild 。

以下是片段，在更改方法后起作用：

＆＃13;

function cloneNode1() {
  var the_node= document.getElementById("hh").lastElementChild;
  var cloned_node = the_node.cloneNode(true);
  document.getElementById("hh").appendChild(cloned_node);
}

＆＃13;

<ul id="hh">
  <li>painting</li>
  <li>cooking</li>
</ul>
<button onclick="cloneNode1()"> click me to colne</button>

＆＃13;

我的克隆html节点的方式不起作用

1 个答案: