javascript array from existing divs innerHTML

Question

Let's say i create dynamically some divs, each has it's dynamically created id (div0, div1, div2, etc.) and i'd like with a function to pass through currently existent divs and put their innerHTML into an array (one, two, three in this case), how can i achieve this in javascript?

html example:

<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') (Or your custom selector, like $('#divcontainer > div')) should already be an array. You can use .map() to get the html into an array: $('#divcontainer > div').map(el => $(el).html()) — Blue
– Blue, Commented Aug 26, 2018 at 11:42

Emeeus · Accepted Answer · 2018-08-26 12:08:27Z

4

You could also use spread syntax

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>

edited Aug 26, 2018 at 12:08

Emeeus

5,2922 gold badges30 silver badges42 bronze badges

answered Aug 26, 2018 at 11:54

scraaappy

2,8862 gold badges21 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Emeeus Over a year ago

If you add >a in the query selector is perfect

m4tt Over a year ago

Thanks for your reply, my doubt here is does it mess if i have others "a" inside divs around the page that i don't want in the array? I'd like it to get the innerHTML only of divs with id starting with "div" for instance, or of divs inside a parent div with id="maindiv" let's say, is it enough to do like $('#maindiv').querySelectorAll(etc..) ?

scraaappy Over a year ago

depending on your selector (document.querySelectorAll("div[id^='div']")) for divs with id starting with "div" for example

m4tt Over a year ago

Thanks, this last solution returns me the html for the <a ..>...</a> too, around the desired text to parse, i made it like: ("div[id^='div'] >a") and works

Blue · Accepted Answer · 2018-08-26 11:46:11Z

Using some magic from here, because document.querySelectorAll returns a NodeList and not an array, we can get the div elements into an array and use .map() to return the div content into an array.

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>

Ideally you should be using a selector like #divcontainer > div to fetch all the divs in the container, but if you know all the ID's, you can use a selector such as:

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

Mahdi Aslami Khavari · Accepted Answer · 2018-08-26 11:45:31Z

0

you can use jquery or javascript function for get your div:

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

answered Aug 26, 2018 at 11:45

Mahdi Aslami Khavari

1,99119 silver badges27 bronze badges

Comments

C. Soylu · Accepted Answer · 2018-08-26 11:49:40Z

0

Give same class to divs and access by $('.class-name') or add a container div and get your div array by $('#divId div').

answered Aug 26, 2018 at 11:49

C. Soylu

443 bronze badges

Comments

brunouno · Accepted Answer · 2018-08-26 11:54:34Z

0

Use a loop after creating a divs collection using 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>

answered Aug 26, 2018 at 11:54

brunouno

5959 silver badges25 bronze badges

Comments

Saurabh Ghewari · Accepted Answer · 2018-08-26 12:00:06Z

0

Here is your solution

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

answered Aug 26, 2018 at 12:00

Saurabh Ghewari

7093 silver badges8 bronze badges

Comments

enxaneta · Accepted Answer · 2018-08-26 12:26:01Z

0

So many ways of doing this. Yet an other way: using 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>

edited Aug 26, 2018 at 12:26

answered Aug 26, 2018 at 12:17

enxaneta

33.2k6 gold badges33 silver badges47 bronze badges

Collectives™ on Stack Overflow

javascript array from existing divs innerHTML

7 Answers 7

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related