Javascript getElementsByClass和appendChild_Javascript_Html_Css_Getelementbyid_Appendchild

Javascript getElementsByClass和appendChild

javascript html css

Javascript getElementsByClass和appendChild,javascript,html,css,getelementbyid,appendchild,Javascript,Html,Css,Getelementbyid,Appendchild,只是温习一下我的javascript技能，并试图弄明白为什么getElementsByClass不适用于我的代码。代码非常简单。单击按钮“clicky”后，脚本将创建div的子h1元素。当我使用getElementById并将div类更改为Id时，它工作得非常好，但当我将其更改为class时，它不工作我尝试过，getElementsByCassName、getElementsByCass、getElementsByTagName，并将div更改为适当的属性，但没有成功 <!doctype

只是温习一下我的javascript技能，并试图弄明白为什么getElementsByClass不适用于我的代码。代码非常简单。单击按钮“clicky”后，脚本将创建div的子h1元素。当我使用getElementById并将div类更改为Id时，它工作得非常好，但当我将其更改为class时，它不工作

我尝试过，getElementsByCassName、getElementsByCass、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>


单击按钮查看appendChild的工作原理
Clicky
函数myFunction（）{
var first=document.createElement（“H1”）；
var text=document.createTextNode（“Jason非常棒”）；
第一，追加子项（文本）；
document.getElementsByName（“这次”）.appendChild（第一个）；
}
你好

您需要从

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

到

供参考-

工作代码-

正如您所注意到的，该函数被称为

getElementsByName

，其中“elements”是复数形式

它按名称（而不是css类）返回标记列表

您需要使用处理类名的函数，并获取数组的第一个元素，或对所有结果进行循环，具体取决于您要查找的内容。

您可以使用IE9+中支持的功能：

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

但更好的选择可能是IE8支持的+

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

请注意，

querySelector（）

使用CSS选择器语法，因此应该在类之前放置一个点（.）

片段：

函数myFunction（）{
var first=document.createElement（“H1”）；
var text=document.createTextNode（“Jason非常棒”）；
第一，追加子项（文本）；
document.querySelector（“.thistime”）.appendChild（第一个）；
}

点击按钮查看appendChild的工作原理

滴答

您好您实际使用的是

getElementsByName（）

，并且

name

不是非交互式表单元素的有效属性。其次，您使用的是节点列表或集合，为了在集合中的每个元素上使用

appendChild（）

，您必须对其进行迭代。然后它就不能像您所希望的那样工作，因为您所要做的就是将创建的元素插入集合的第一个元素，然后将其移动到第二个元素，然后移动到第三个元素，依此类推，直到它位于最后一个元素。因此，您还需要使用

cloneNode

或在所述循环的每次迭代中重复创建创建的元素。谢谢，querySelector似乎更有用，我肯定会更多地使用它！

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