getElementsByClassname 和 appendChild
Posted
技术标签:
【中文标题】getElementsByClassname 和 appendChild【英文标题】：getElementsByClass and appendChild 【发布时间】：2015-10-29 22:07:57 【问题描述】：只是复习我的 javascript 技能并试图弄清楚为什么 getElementsByClass 不适用于我的代码。代码非常简单。单击“clicky”按钮后，脚本将创建 div 的子 h1 元素。当我使用 getElementById 并将 div 类更改为 Id 时它工作得非常好，但当我将其更改为类时它不起作用。
我已经尝试过，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 或在所述循环的每次迭代中重复创建创建的元素。
【参考方案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
【讨论】：
【参考方案2】：你可以使用getElementsByClassName()，IE9+支持：
document.getElementsByClassName("thistime")[0].appendChild(first);
但更好的选择可能是querySelector()，它在 IE8+ 中受支持
document.querySelector(".thistime").appendChild(first);
请注意，querySelector() 使用 CSS 选择器语法，因此您应该在类之前放置一个点 (.)。
片段：
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>【讨论】：
谢谢，querySelector 似乎更有用了，我一定会更多地使用它！【参考方案3】：如您所见，该函数名为getElementsByName，其中“elements”是复数形式。
它返回一个 list 标记名称（而不是它们的 css 类）。
您需要使用处理类名的函数，并获取数组的第一个元素，或者循环所有结果，具体取决于您要查找的内容。
【讨论】：
以上是关于getElementsByClassname 和 appendChild的主要内容，如果未能解决你的问题，请参考以下文章
getElementsByClassname 和 appendChild
document.getElementById 和 document.getElementsByClassName获取DOM元素的区别
getElementsByClassName() - 不是一个函数[关闭]
JavaScript Ultimate getElementsByClassName - 罗伯特的谈话 - 网络发展和互联网趋势