logo标签列表

getElementsByClass and appendChild

javascripthtmlcssgetelementbyidappendchild
19

我正在温习JavaScript技能，并尝试弄清楚为什么我的代码中getElementsByClass不起作用。 代码非常简单。 在点击“clicky”按钮时，脚本将在div中创建一个子h1元素。 当我使用getElementById并将div类更改为Id时，它可以正常工作，但当我将其更改为class时就无法正常工作。

我已经尝试过getElementsByClassName、getElementsByClass、getElementsByTagName以及更改div的适当属性，但没有任何运气。

<!doctype html>
<html>


<body>
<p>Click on button to see how appendChild works</p>

<button onclick="myFunction()">Clicky </button>

<script>
function myFunction(){
var first = document.createElement("H1");
var text = document.createTextNode("Jason is pretty awesome");
first.appendChild(text);

document.getElementsByName("thistime").appendChild(first);

}
</script>

<div class="thistime">Hi</div>

    </body>






</html>
你实际上正在使用 getElementsByName()，而 name 不是非交互式表单元素的有效属性。其次，你正在使用 NodeList 或集合，必须迭代每个元素才能在集合中使用 appendChild()。然后它不会按照你想要的方式工作，因为你所做的只是将创建的元素插入到集合的第一个元素中，然后移动到第二个，然后是第三个，以此类推，直到最后一个元素。因此，在循环的每次迭代中，你还需要使用 cloneNode 或重复创建创建的元素。 - David Thomas
3个回答
41
13

您可以使用 getElementsByClassName()，它支持IE9+：

  document.getElementsByClassName("thistime")[0].appendChild(first);

但更好的选择可能是querySelector()，它在IE8+中得到支持。

  document.querySelector(".thistime").appendChild(first);

请注意，querySelector()使用CSS选择器语法，因此您应该在类名前加上点号 (.)。

Snippet: 

function myFunction() {
  var first = document.createElement("H1");
  var text = document.createTextNode("Jason is pretty awesome");
  first.appendChild(text);

  document.querySelector(".thistime").appendChild(first);
}
<p>Click on button to see how appendChild works</p>

<button onclick="myFunction()">Clicky</button>

<div class="thistime">Hi</div>

1
谢谢，querySelector 看起来更有用，我一定会更多地使用它！ - Snorlax
4

正如你所注意到的，这个函数被称为getElementsByName，其中"elements"是复数形式。

它会按名称返回标记的列表（而不是它们的CSS类）。

您需要使用处理类名的函数，并获取数组中的第一个元素，或根据您要查找的内容循环遍历所有结果。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接