Javascript getElementsByClass 和 appendChild
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31861190/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
getElementsByClass and appendChild
提问by Snorlax
just brushing up on my javascript skills and trying to figure out why getElementsByClass isn't working for my code. The code is pretty simple. Upon clicking a button "clicky", the script will create a child h1 element of div. It works perfectly fine when I use getElementById and changing the div class to Id but doesn't work when I change it to class.
只是复习我的 javascript 技能并试图找出为什么 getElementsByClass 不适用于我的代码。代码非常简单。单击“clicky”按钮后，脚本将创建 div 的子 h1 元素。当我使用 getElementById 并将 div 类更改为 Id 时，它工作得非常好，但当我将其更改为类时不起作用。
I've tried, getElementsByClassName, getElementsByClass, getElementsByTagName and changing the div to the appropriate attribute but no luck.
我试过 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>
回答by Nikhil Aggarwal
You need to update your code from
你需要更新你的代码
document.getElementsByName("thistime").appendChild(first);
to
到
document.getElementsByClassName("thistime")[0].appendChild(first);
For reference - https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
供参考 - https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
Working code - http://plnkr.co/edit/k8ZnPFKYKScn8iYiZQk0?p=preview
回答by Rick Hitchcock
You could use getElementsByClassName(), which is supported in IE9+:
您可以使用IE9+ 支持的getElementsByClassName()：
document.getElementsByClassName("thistime")[0].appendChild(first);
But a better alternative may be querySelector(), which is supported in IE8+
但更好的选择可能是querySelector()，它在 IE8+ 中受支持
document.querySelector(".thistime").appendChild(first);
Note that querySelector()uses CSS selector syntax, so you should place a dot (.) before the class.
请注意，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>回答by Pierre Arlaud
As you have noticed, the function is called getElementsByNamewith "elements" being a plural.
正如您所注意到的，调用该函数时getElementsByName，“元素”是复数形式。
It returns a listof markups by their name (and not their css class).
它按名称（而不是其 css 类）返回标记列表。
You need to use the function that handles the class name, and get the first element of the array, or loop on all the results, depending on what you are looking for.
您需要使用处理类名的函数，并获取数组的第一个元素，或者对所有结果进行循环，具体取决于您要查找的内容。
