javascript 来自现有 div innerHTML 的数组

Question

假设我动态创建了一些 div，每个 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

您可以使用 jquery 或 javascript 函数来获取您的 div:

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

Answer 2

使用一些魔法从 here, because document.querySelectorAll returns a NodeList and not an array, we can get the div elements into an array and use .map() 到 return 将 div 内容放入数组中。

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，但如果您知道所有 ID，则可以使用如下选择器：

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

Answer 3

将相同的 class 提供给 divs 并通过 $('.class-name') 访问或添加容器 div 并获取您的 div 数组由 $('#divId 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

使用 querySelectorAll 创建 divs 集合后使用循环：

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 6

这是您的解决方案

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 7

有很多方法可以做到这一点。另一种方式：使用 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>

javascript 来自现有 div innerHTML 的数组

javascript array from existing divs innerHTML

javascript

arrays

innerhtml