Question

我为网站编写此代码。我想为所有pre元素添加一个按钮元素。但是所有预标签都没有结果按钮。

这是我的HTML代码：

<pre>Click the button to make a BUTTON element with text.</pre>
<pre>Click the button to make a BUTTON element with text.</pre>
<pre>Click the button to make a BUTTON element with text.</pre>
<pre>Click the button to make a BUTTON element with text.</pre>

和javascript代码：

＆＃13;

function myFunction() {
  var btn = document.createElement("BUTTON");
  var t = document.createTextNode("CLICK ME");
  btn.appendChild(t);
  var x = document.querySelectorAll("pre");
  alert(x.length);
  for (var i = 0; i <= x.length; i++) {
    x[i].appendChild(btn);
  }

}

myFunction();

＆＃13;

<pre>Click the button to make a BUTTON element with text.</pre>
<pre>Click the button to make a BUTTON element with text.</pre>
<pre>Click the button to make a BUTTON element with text.</pre>
<pre>Click the button to make a BUTTON element with text.</pre>

＆＃13;

Answer 1

因为你只是移动相同的按钮。当您使用appendChild时，它不会复制您提供的孩子，移动它。因此，您的代码将按钮放在第一个p中，然后将其移出第二个p等等。

为循环的每次迭代创建一个新按钮。

来自the DOM spec for appendChild：

将节点newChild添加到此节点的子节点列表的末尾。 如果newChild已在树中，则会先将其删除。

（我的重点）

直播示例：

function myFunction() {
  var btn, t;
  var x = document.querySelectorAll("pre");
  for (var i = 0; i <= x.length; i++) {
    btn = document.createElement("BUTTON");
    t = document.createTextNode("CLICK ME");
    btn.appendChild(t);
    x[i].appendChild(btn);
  }
}

myFunction();

<pre>Click the button to make a BUTTON element with text.</pre>
<pre>Click the button to make a BUTTON element with text.</pre>
<pre>Click the button to make a BUTTON element with text.</pre>
<pre>Click the button to make a BUTTON element with text.</pre>

为什么所有预标签都没有按钮元素？

1 个答案: