getElementsByClassname 和 appendChild

Question

只是复习一下我的 javascript 技能，并试图弄清楚为什么 getElementsByClass 对我的代码不起作用。代码非常简单。单击按钮 "clicky" 后，脚本将创建 div 的子 h1 元素。当我使用 getElementById 并将 div class 更改为 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

如您所见，函数名为 getElementsByName，其中 "elements" 是复数。

它returns 列表标记的名称（而不是它们的 css class）。

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

Answer 3

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

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

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

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

请注意 querySelector() 使用 CSS 选择器语法，因此您应该在 class.

之前放置一个点 (.)

片段：

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>

getElementsByClassname 和 appendChild

getElementsByClass and appendChild

html

javascript

css

getelementbyid

appendchild