getElementsByClassname 和 appendChild答案

【问题标题】：getElementsByClass and appendChildgetElementsByClassname 和 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 或在所述循环的每次迭代中重复创建创建的元素。

标签： javascript html css getelementbyid appendchild

【解决方案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 类）。

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

【讨论】：