массив javascript из существующих divs innerHTML

Question

Допустим, я динамически создаю несколько div, у каждого из которых есть свой динамически создаваемый id (div0, div1, div2 и т. Д.), И мне хотелось бы, чтобы функция проходила через существующие в настоящее время div и помещала их innerHTML в массив (один, два, три в данном случае), как я могу добиться этого в JavaScript?

HTML пример:

<div contenteditable="false" id="div0">
  <a href="#">one</a>
  <span id="one-close">
    <i class="material-icons">close</i>
  </span>
</div>
<div contenteditable="false" id="div1">
  <a href="#">two</a>
  <span id="two-close">
    <i class="material-icons">close</i>
  </span>
</div>
<div contenteditable="false" id="div2">
  <a href="#">three</a>
  <span id="three-close">
    <i class="material-icons">close</i>
  </span>
</div>

Answer 1

Вот ваше решение

var arr = [];
function myFunction() {
  var anchors = document.getElementsByTagName("a");
  for(var i = 0; i < anchors.length; i++){
   arr.push(anchors[i].text);
  }
}

console.log(arr);

Answer 2

Так много способов сделать это.Еще один способ: использовать ES6 Array.from

let divsA = Array.from(document.querySelectorAll("[id^='div'] a"));
divsA.map(a => console.log(a.innerHTML));

<div contenteditable="false" id="div0">
  <a href="#">one</a>
  <span id="one-close">
    <i class="material-icons">close</i>
  </span>
</div>
<div contenteditable="false" id="div1">
  <a href="#">two</a>
  <span id="two-close">
    <i class="material-icons">close</i>
  </span>
</div>
<div contenteditable="false" id="div2">
  <a href="#">three</a>
  <span id="three-close">
    <i class="material-icons">close</i>
  </span>
</div>

Answer 3

Использование цикла после создания коллекции divs с использованием querySelectorAll:

let divs = document.querySelectorAll('div');
let arr = [];


for (let i = 0; i < divs.length; i++) {
  arr.push(divs[i].innerHTML);
}

console.log(arr);

<div>hi</div>
<div>hi2</div>
<div>hi3</div>

Answer 4

Вы также можете использовать синтаксис распространения

const divsContents = [...document.querySelectorAll("div>a")].map(e=>e.innerHTML);
console.log(divsContents);

<div contenteditable="false" id="div0">
  <a href="#">one</a>
  <span id="one-close">
    <i class="material-icons">close</i>
  </span>
</div>
<div contenteditable="false" id="div1">
  <a href="#">two</a>
  <span id="two-close">
    <i class="material-icons">close</i>
  </span>
</div>
<div contenteditable="false" id="div2">
  <a href="#">three</a>
  <span id="three-close">
    <i class="material-icons">close</i>
  </span>
</div>

Answer 5

Дайте тот же класс для div и получите доступ к $ ('. Class-name') или добавьте контейнер div и получите ваш массив div для $ ('# divId div').

Answer 6

Используя некоторую магию из здесь , поскольку document.querySelectorAll возвращает NodeList, а не массив, мы можем получить элементы div в массив и использовать .map() для возвратаразделить содержимое на массив.

var divs = [].slice.call(document.querySelectorAll('div'));

console.log(divs.map(div => div.innerHTML));

<div contenteditable="false" id="div0">
  <a href="#">one</a>
  <span id="one-close">
    <i class="material-icons">close</i>
  </span>
</div>
<div contenteditable="false" id="div1">
  <a href="#">two</a>
  <span id="two-close">
    <i class="material-icons">close</i>
  </span>
</div>
<div contenteditable="false" id="div2">
  <a href="#">three</a>
  <span id="three-close">
    <i class="material-icons">close</i>
  </span>
</div>

В идеале вы должны использовать селектор типа #divcontainer > div для извлечения всех элементов div в контейнере, но если вы знаете все идентификаторы, вы можете использоватьселектор, такой как:

document.querySelectorAll('#div0, #div1, #div2')

Answer 7

Вы можете использовать функцию jquery или javascript для получения div:

myArray[0] = document.getElementByID("div0").innerHtml;
myArray[1] = document.getElementByID("div1").innerHtml;
myArray[2] = document.getElementByID("div2").innerHtml;