来自现有 div innerHTML 的 javascript 数组答案

【问题标题】：javascript array from existing divs innerHTML来自现有 div innerHTML 的 javascript 数组
【发布时间】：2019-02-01 04:45:35
【问题描述】：

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

【问题讨论】：

$('div')（或您的自定义选择器，如$('#divcontainer > div')）应该已经是一个数组。您可以使用 .map() 将 html 放入数组中：$('#divcontainer > div').map(el => $(el).html())

标签： javascript arrays innerhtml

【解决方案1】：

你也可以使用扩展语法

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>

【讨论】：

如果在查询选择器中加上>a就完美了
感谢您的回复，我的疑问是，如果我在页面周围的 div 内有其他“a”我不希望在数组中出现，这会不会很混乱？例如，我希望它只获取 id 以“div”开头的 div 的 innerHTML，或者 id="maindiv" 的父 div 内的 div 让我们说，像 $('#maindiv' ).querySelectorAll(etc..) ?
取决于您的选择器 (document.querySelectorAll("div[id^='div']"))，例如 id 以“div”开头的 div
谢谢，最后一个解决方案也返回了 ... 的 html，围绕要解析的所需文本，我将其设为：("div[id ^='div'] >a") 并且有效

【解决方案2】：

使用here 中的一些魔法，因为document.querySelectorAll 返回的是NodeList 而不是数组，我们可以将div 元素放入数组中，然后使用.map() 将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')

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

为 div 提供相同的类并通过 $('.class-name') 访问或添加容器 div 并通过 $('#divId div') 获取您的 div 数组。

【讨论】：

【解决方案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>

【讨论】：

【解决方案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);

【讨论】：

【解决方案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>

【讨论】：