Как получить содержимое всех элементов с одинаковым именем класса? - PullRequest
Новая
       21

Как получить содержимое всех элементов с одинаковым именем класса?

0 голосов
/ 19 октября 2019

Получить содержимое всех элементов с одинаковым именем класса, используя JavaScript. Как я могу получить весь innerHTML-контент от элементов одного класса? Я попробовал код, описанный ниже, но он не работает. Я получаю только первое «Hello» от элемента, но я не получаю «World! From second element». Конечно, будет гораздо больше элементов с тем же классом, но нетолько два. 

function myFunction() {
  var child = document.querySelectorAll(".child");
  var child, i;
  for (i = 0; i < child.length; i++) {
    var childall = child[i].innerHTML;
  }

  document.getElementById("demo").innerHTML = childall;
}
<div class="parent" id="parent">
  <div class="child" id="child">Hello</div>
  <div class="child" id="child">World!</div>
</div>
<button onclick="myFunction()">click</button>
<div class="demo" id="demo">

1 Ответ

0 голосов
/ 19 октября 2019

Переместить childall из цикла и назначить ему массив. Теперь вставьте в него все значения innerHTML. После окончания цикла присоедините массив к строке и присвойте демо. 

function myFunction() {
  var child = document.querySelectorAll(".child");
  var child, i;
  var childall = [];
  for (i = 0; i < child.length; i++) {
    childall.push(child[i].innerHTML);
  }

  document.getElementById("demo").innerHTML = childall.join('<br>');
}
<div class="parent" id="parent">
  <div class="child" id="child">Hello</div>
  <div class="child" id="child">World!</div>
</div>
<button onclick="myFunction()">click</button>
<div class="demo" id="demo">

Вместо цикла for можно использовать Array.from(), чтобы получить массив детей innerHTML. 

function myFunction() {
  const childall = Array.from(document.querySelectorAll(".child"), el => el.innerHTML);

  document.getElementById("demo").innerHTML = childall.join('<br>');
}
<div class="parent" id="parent">
  <div class="child" id="child">Hello</div>
  <div class="child" id="child">World!</div>
</div>
<button onclick="myFunction()">click</button>
<div class="demo" id="demo">
...