代码之家 › 专栏 › 技术社区 › m4tt

来自现有div innerHTML的javascript数组

innerhtml arrays javascript

m4tt · 技术社区 · 6 年前

假设我动态创建了一些div,每个div都有动态创建的i d(div0、div1、div2等),我想用一个函数来传递当前存在的div,并将它们的innerHTML放入一个数组(在这种情况下是1、2、3),如何用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>

7 回复 | 直到 6 年前

Emeeus 6 年前

也可以使用扩展语法

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>

Blue 6 年前

使用一些魔法 here 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,但如果您知道所有ID,则可以使用选择器,例如:

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

Mahdi Aslami Khavari 6 年前

您可以使用jquery或javascript函数 div :

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

C. Soylu 6 年前

将相同的类赋给div并通过$('.class name')访问,或者添加一个容器div并通过$('.divId div')获取div数组。

brunouno 6 年前

创建后使用循环 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>

Saurabh Ghewari 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);

enxaneta 6 年前

这么多的方法。另一种方法:使用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>