Question

我创建了自己的JS库。在那我想尝试定义这样的追加方法：

append: function (els) {
var elChild = document.createElement('span');
elChild.innerHTML = els;
for(i = 0; i < this.length; i++){
    this[i].appendChild(elChild);
}
}

现在我在HTML页面的脚本标记中调用此append方法，如下所示：

<body>
<h1 class="first_heading">hello</h1>
<h1 class="second_heading">hi</h1>
<button>Test Me</button>
</body>
<script>
dome.get('h1').append('<p>some text</p>');
</script>

但问题是所有h1标签都没有附加段落文本。只有最后一个h1会附加段落文本。任何解决方案？

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild：

Node.appendChild() 方法将节点添加到指定父节点的子节点列表的末尾。如果给定子项是对文档中现有节点的引用，appendChild()将其从当前位置移动到新位置

换句话说，同一节点不能出现在文档的多个位置。您必须为要创建的每个孩子分别致电document.createElement('span')。

Answer 2

如上所述this，这对应于范围内的对象。在这种情况下，它是窗口对象。这是将字符串附加到所有标题

的简单方法

＆＃13;

  function append(tagname, text) {
    // get all tag names
    all_t = document.getElementsByTagName(tagname);
    // loop through and append the string to the inner html of each tag
    for (var x = 0; x < all_t.length; ++x) {
      all_t[x].innerHTML += text
    }

  }
  append('h1', '<p>some text</p>')

＆＃13;

<h1 class="first_heading">hello</h1>
<h1 class="second_heading">hi</h1>
<button id="b">Test Me</button>

＆＃13;

追加方法不附加到所有元素

2 个答案: