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"]

Answer 1

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>

Answer 2

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>

Answer 3

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

Answer 4

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>