Question

我的具体问题是我需要将一个类中的所有元素都放入div中。我的尝试是：

myElement = document.getElementsByClassName("a_random_class");
document.getElementByID("unique_ID").innerHTML = myElement.innerHTML;

然而它没有用。现在我不知道怎么能实现这个目标......

可选：一般问题是我正在使用没有模板引擎的PHP脚本，这使得修改布局非常困难，不得不更改多个文件......所以我的想法是使用Javascript为了以我需要的方式呈现一些元素，因此能够给他们我需要的风格......这是一个好主意吗？有其他选择吗？

非常感谢你的时间。

Answer 1

getElementsByClassName会返回HTMLCollection（以前是NodeList;我们只是将其称为列表），而不仅仅是一个元素，而且该列表并不是＆＃39} ; t有一个innerHTML属性。

如果你想复制类的元素，你可以在cloneNode的循环中完成：

＆＃13;

setTimeout(function() {
  var element = document.getElementById("unique_ID");
  element.innerHTML = "";
  Array.prototype.forEach.call(document.querySelectorAll(".a_random_class"), function(e) {
    element.appendChild(e.cloneNode(true));
  });
}, 300);

＆＃13;

#unique_ID {
  border: 1px solid blue;
}

＆＃13;

<div id="unique_ID"></div>
<div class="a_random_class">a</div>
<div class="a_random_class">b</div>
<div class="a_random_class">c</div>
<div class="a_random_class">d</div>
<div class="a_random_class">e</div>
<div class="a_random_class">f</div>

＆＃13;

我使用querySelectorAll而不是getElementsByClassName有两个原因：

getElementsByClassName会返回 live 列表，当您复制/移动节点时会让事情变得尴尬，因为您正在循环的事情会不断变化。我们可以将它变成这样的数组，但是：
```
var arr = Array.prototype.slice.call(document.getElementsByClassName('a_random_name'));
```
...然后使用arr。
querySelectorAll比getElementsByClassName得到更好的支持（例如，IE8有querySelectorAll但不是getElementsByClassName）。

请注意，即使Array#forEach不是数组，也会使用NodeList函数。（有关here的更多信息，请向下滚动到＆＃34;对于类似数组的对象＆＃34 ;.）（如果您需要支持IE8，则需要对其进行填充/填充或将其替换为一个简单的for循环。）

或者，如果您想移动，请不要使用cloneNode：

＆＃13;

setTimeout(function() {
  var element = document.getElementById("unique_ID");
  element.innerHTML = "";
  Array.prototype.forEach.call(document.querySelectorAll(".a_random_class"), function(e) {
    element.appendChild(e);
  });
}, 300);

＆＃13;

#unique_ID {
  border: 1px solid blue;
}

＆＃13;

<div id="unique_ID"></div>
<div class="a_random_class">a</div>
<div class="a_random_class">b</div>
<div class="a_random_class">c</div>
<div class="a_random_class">d</div>
<div class="a_random_class">e</div>
<div class="a_random_class">f</div>

＆＃13;

将getElementsByClassName放在getElementByID中

1 个答案: