Question

我试图将子广告添加到具有相同类别的所有div。

我可以通过定位其ID

来实现这一目标

HTML

<div id="h1" class="header">Hello </div>
<hr>
<div id="h2" class="header">what about this one </div>

的JavaScript

var header = document.getElementById('h1');

var newSpan = document.createElement("span");
header.appendChild(newSpan);
newSpan.innerHTML = "i'm here";

然而，当我将其更改为

时

var header = document.getElementsByClassName('header');

它无法正常工作。

谁能看到我出错的地方？

JSFiddle

Answer 1

要做到这一点，你需要迭代它们，因为 getElementsByClassName() 返回一个像html元素集合的数组。您可以使用$(".numOfMember").change(function(){ if($(".numOfMember").val() < 12) { $("#memberInfo").html(""); for(i=0;i<$(".numOfMember").val();i++) { $("#memberInfo").append("<div>What is your name?</div><br><input type='text'/>"); } } })循环

for

var headers = document.getElementsByClassName('header');

for (var i = 0; i < headers.length; i++) {
  var newSpan = document.createElement("span");
  newSpan.innerHTML = "i'm here";
  headers[i].appendChild(newSpan);
}

或者您可以使用 Array.prototype.forEach 与 call() 进行迭代

<div id="h1" class="header">Hello</div>
<hr>
<div id="h2" class="header">what about this one</div>

var headers = document.getElementsByClassName('header');

[].forEach.call(headers,function(ele) {
  var newSpan = document.createElement("span");
  newSpan.innerHTML = "i'm here";
  ele.appendChild(newSpan);
})

有关迭代检查的更多信息： - For loop for HTMLCollection elements

Answer 2

javascript document.getElementById只返回一个Id，但是document.getElementByClassName将返回一个类似数组的对象的集合，应该在这里使用。

我已将您的js代码更新为：

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
  <a href="#">
    <img src="//lorempixel.com/100/100" />
  </a>
  <ul class="nav navbar-nav pull-xs-right">
    <li class="nav-item">
      <button class="btn btn-link" data-target="#explainQuestionModal" data-toggle="modal" type="button">
        Explain Question
      </button>
      <button class="btn btn-link">
        Preview
      </button>
      <button class="btn btn-link">
        <a href="#">Save and exit</a>
      </button>
    </li>
  </ul>
</nav>

和HTML代码：

var header = document.getElementsByClassName('header');
//console.log(header);

for(var i=0;i<header.length;i++){
    var newSpan = document.createElement("span");
    header[i].appendChild(newSpan);
    newSpan.innerHTML = "i'm here";
}

HTML代码有一些轻微的错误 class＆＃34; header＆＃34; 而不是 class =＆＃34; header＆＃34;

Fiddle

Answer 3

您可以考虑将文本插入CSS生成的内容：

.header::after {
  content: "i'm here";
}

<div id="h1" class="header">Hello </div>
<hr />
<div id="h2" class="header">what about this one </div>

将子元素添加到同一个类的所有div

3 个答案: