push children of div to javascript array

Question

I have a div with some child elements inside it. I'm trying to loop through the div and push each child to an object array but I can't figure out how to loop through a div.

I have tried

$("#id").children('div').each(function(){arrayName.push(this.html)}

with no luck. Here is what I have so far.

$("#todocontentInner").children('div').each(function() { 
   oldContent.push(this.html());
            });

I expect oldcontent to equal something kinda like this

["<div class="contentitem">Bob</div>", "<div class="contentitem">Joe</div"]

possible duplicate of https://stackoverflow.com/questions/3024391/how-do-i-iterate-through-child-elements-of-a-div-using-jquery — mahadev kalyan srikanth, Oct 24 '19 at 23:21
@mahadevkalyansrikanth The iteration isn't really part of this question. This is about how to push the elements' HTML to an array. — agrm, Oct 26 '19 at 11:12

Nidhin Joseph · Answer 1 · 2019-10-24T23:20:54.480

0

What you are doing is correct, except that this is an element instance. So in order to call the html() you need to make this a jQuery instance by $(this). Try the code below.

let arr = [];

$("#parent div").each(function() {
  arr.push($(this).html());
});

console.log(arr);

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div id="parent">
  <div>child 1</div>
  <div>child 2</div>
</div>

edited Oct 24 '19 at 23:20

answered Oct 24 '19 at 23:19

Nidhin Joseph

9,981
4
26
48

Please explain this answer – Rojo Oct 24 '19 at 23:20

score 0 · Answer 2 · answered Oct 24 '19 at 23:24

You dont need jQuery for this:

const arr = [...document.querySelectorAll('#someID > div')].map(el => el.innerHTML);

console.log(arr);

<div id="someID">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

score 0 · Answer 3 · answered Oct 24 '19 at 23:33

Your code of

$("#id").children('div').each(function(){arrayName.push(this.html)}

is almost correct. The problem is that this.html is mistaken. You could use this.innerHTML, like

$("#id").children('div').each(function(){arrayName.push(this.innerHTML)}

because this in that context represents the element. However, you can do this in the jQuery way as well:

$("#id").children('div').each(function(){arrayName.push($(this).html)}

agrm · Answer 4 · 2019-10-26T11:26:44.860

Just to clear the air: this returns a native DOM element, whereas $(this) will return its equivalent jQuery element. As .html() is a jQuery method, it will only work on the jQuery element, not the native DOM element. So to get the HTML of an element, you will have to use either this.innerHTML or $(this).html().

However; it will still not produce the result you expect. To push the full HTML of the child elements, you will need to push their outerHTML instead.

TLDR; You will get the expected result by pushing the HTML of the native DOM element using this.outerHTML:

$("#id").children('div').each(function(){arrayName.push(this.outerHTML)})

Or if you really want to use jQuery, you will get the same result from $(this).prop('outerHTML'):

$("#id").children('div').each(function(){arrayName.push($(this).prop('outerHTML'))})

You can see a working sample here:

let arrayName = []
$("#id").children('div').each(function(){arrayName.push(this.outerHTML)})
console.log("First approach: ", arrayName)

let arrayName2 = []
$("#id").children('div').each(function(){arrayName2.push($(this).prop('outerHTML'))})
console.log("Second approach: ", arrayName2)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="id">
  <div class="contentitem">Bob</div>
  <div class="contentitem">Joe</div>
</div>

push children of div to javascript array

4 Answers4