insert div into div with jquery

Question

Problem:

I want to insert content as the last child of an element. To reproduce what i want, i created this fiddle: http://jsfiddle.net/lexhartman/zx0r8mnu/2/

The jquery-code i am using, is the following:

jQuery(document).ready(function() {
  var $collectionHolder = $('div.collectionholder');

  var $innerDivOne = $('<li><p>TEST 1 also has to be green</p></li>');
  var $innerDivTwo = $('<li><p>TEST 2 also has to be green</p></li>');
  var $outerDivChunk = $('<div class=parentdiv><div class="subdiv"><ul class="ul-list"></ul></div></div>').append($innerDivOne).append($innerDivTwo);

  $collectionHolder.append($outerDivChunk);

});

But... the lis are being appending to the div, not the ul inside the div.

Goal:

What i want to achieve is that the two innerdiv's (li's with no classname) are inserted in the "ul" div (with classname: ul-list).

Attempts:

The outerdiv variable has to stay the same (i know that when the outerdiv only has the "ul" it works, but in my code that will bring a lot of other headaches which i won't be bothering you with.. :D).

I am guessing i will be needing an other function then append, but which one or maybe i can use append in another way then i am doing now?

Thanks!

You are not appending the lis to the list, you are appending it to the div — epascarello
– epascarello, Commented Nov 16, 2016 at 13:42

epascarello · Accepted Answer · 2016-11-16 13:43:30Z

2

The lis are being appending to the div, not the ul inside the div. You would need to select the ul.

var $outerDivChunk = $('<div class=parentdiv><div class="subdiv"><ul class="ul-list"></ul></div></div>');
outerDivChunk.find("ul").append($innerDivOne).append($innerDivTwo);

answered Nov 16, 2016 at 13:43

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

2 Comments

Lex Hartman Over a year ago

You sir, are fast and effective! Thank you! Updated fiddle: jsfiddle.net/lexhartman/zx0r8mnu/6

epascarello Over a year ago

Imagine how much faster I would be if I did not forget my coffee at home this morning. :)

Collectives™ on Stack Overflow

insert div into div with jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related