Question

只是了解我的javascript技巧，并试图找出为什么getElementsByClass不适用于我的代码。代码非常简单。单击按钮＆＃34; clicky＆＃34;，脚本将创建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>

Answer 1

您需要从

更新代码

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

到

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

供参考 - https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

工作代码 - http://plnkr.co/edit/k8ZnPFKYKScn8iYiZQk0?p=preview

Answer 2

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

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

但更好的选择可能是querySelector()，IE8 +

支持

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

请注意querySelector()使用CSS选择器语法，因此您应该在类之前放置一个点（。）。

<强>段：

＆＃13;

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

＆＃13;

<p>Click on button to see how appendChild works</p>

<button onclick="myFunction()">Clicky</button>

<div class="thistime">Hi</div>

＆＃13;

Answer 3

正如您所注意到的，该函数被称为getElementsByName，其中包含＆＃34;元素＆＃34;是一个复数。

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

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

getElementsByClass和appendChild

3 个答案: