Adding new elements

Manipulating the DOM

Manipulating the DOM

As we've already seen, html and text can be used to update the page. The problem with those functions, however, is those functions replace the contents of the element they're called on, rather than modifying the content. You could, I suppose, keep appending text, but after a while your code will fall under its own weight.

jQuery offers several functions to easily manipulate the DOM.

Internal DOM manipulation

If you wish to update the contents of an element by adding or removing elements, you can use append, appendTo, prepend and prependTo. Remember that the element you target will become the container for the new element. So using append will add a new element inside the target, not after the element. (There's another function for that.)

prepend and prependTo

prepend and prependTo add new content to the begining of the contents of a target. The difference between them is the order in which the parameters and target are passed in. The lines of code below are semantically identical.

// prepend is called on the target, and accepts the new content as the parameter
$('#target').prepend('<div>New content</div>');

// prependTo is called on the new content, and accepts the target as the parameter
$('<div>New content</div>').prependTo('#target');

If you had the following starting HTML

<div id="target">
 <div>existing content</div>
</div>

And executed either of the lines of JavaScript above, the result would be as follows.

<div id="target">
 <div>New content</div>
 <div>existing content</div>
</div>

append and appendTo

append and appendTo add new content to the end of the contents of a target. The difference between them is the order in which the parameters and target are passed in. The lines of code below are semantically identical.

// append is called on the target, and accepts the new content as the parameter
$('#target').append('<div>New content</div>');

// appendTo is called on the new content, and accepts the target as the parameter
$('<div>New content</div>').appendTo('#target');

If you had the following starting HTML

<div id="target">
 <div>existing content</div>
</div>

And executed either of the lines of JavaScript above, the result would be as follows.

<div id="target">
 <div>existing content</div>
 <div>New content</div>
</div>

External DOM manipulation 

External DOM manipulation

Functions such as prepend add new content inside of the target, using the target as a container for the new content. If you wish to add new content before or after an existing element, jQuery provides after, insertAfter, before, and insertBefore.

after and insertAfter

after and insertAfter both add new content after the target, on the same level of the hierarchy, rather than inside the target. The difference between the two functions is the order of parameters and target.

// after is called on the target, and accepts the new content as a parameter
$('target').after('

New content
');

// insertAfter is called on the new content, and accepts the target as a parameter
$('

New content
').insertAfter('#target');

If you had the following HTML as the starting point:

<div id="target">
 <div>existing content</div>
</div>

... calling either of the lines of JavaScript above would produce the following result:

<div id="target">
 <div>existing content</div>
</div>
<div>New content</div>

before and insertBefore

before and insertBefore both add new content after the target, on the same level of the hierarchy, rather than inside the target. The difference between the two functions is the order of parameters and target.

// before is called on the target, and accepts the new content as a parameter
$('target').before('

New content
');

// insertBefore is called on the new content, and accepts the target as a parameter
$('

New content
').insertBefore('#target');

If you had the following HTML as the starting point:

<div id="target">
 <div>existing content</div>
</div>

... calling either of the lines of JavaScript above would produce the following result:

<div>New content</div>
<div id="target">
 <div>existing content</div>
</div>

https://codepen.io/GeekTrainer/pen/1afc4d560d697b40f26e48b7b24a7f4e/

Wrapping Contents

Wrapping existing content with new content

There will be times you'll need to manipulate the DOM by surrounding existing content with a new element. jQuery provides several wrapping functions to perform that type of an operation.

wrapping functions

For the wrap and wrapAll demonstrations below, we'll be using this HTML as the starting point:

<div id="target">
 <div class="demo">Item one</div>
 <div class="demo">Item two</div>
</div>

wrap

The wrap function wraps each item with the element passed into the function. As a result, if you called:

$('#target').wrap('<section></section>');

the result would be:

<section>
 <div id="target">
  <div class="demo">Item one</div>
  <div class="demo">Item two</div>
 </div>
</section>

Where things get a little more interesting is if you used a selector that returned multiple items. Imagine the following JavaScript:

$('.demo').wrap('<section></section>');

The result would be:

<div id="target">
 <section>
  <div class="demo">Item one</div>
 </section>
 <section>
  <div class="demo">Item two</div>
 </section>
</div>

Notice that wrap will wrap each element returned by the selector with the new element.

wrapAll

wrapAll behaves differently. Rather than wrapping each returned element, wrapAll wraps all returned content with one new element. As a result, the JavaScript

$('.demo').wrapAll('<section></section>');

would result in

<div id="target">
 <section>
  <div class="demo">Item one</div>
  <div class="demo">Item two</div>
 </section>
</div>

wrapInner

wrapInner is different from both wrap and wrapAll in that wrapInner operates on the children of the target, rather than on the target itself. If you started with the following HTML...

<div id="target">
 <div>Item one</div>
 <div>Item two</div>
</div>

...and executed the JavaScript below...

$('#target').wrapInner('<section></section>');

...the result would be:

<div id="target">
 <section>
  <div>Item one</div>
  <div>Item two</div>
 </section>
</div>

https://codepen.io/GeekTrainer/pen/1ad611909eeab30a35f0ba0b0b44aa07