Document Manipulation

DOM Insertion, Inside

.prepend()

Demonstration Box

Trigger

$('div.demo-box').prepend('<div class="insertion">This text was <strong>inserted</strong></div>');

.prependTo()

Demonstration Box

Trigger

$('<div class="insertion">This text was <strong>inserted</strong></div>') .prependTo('div.demo-box');

.append()

Demonstration Box

Trigger

$('div.demo-box').append('<div class="insertion">This text was <strong>inserted</strong></div>');

.appendTo()

Demonstration Box

Trigger

$('<div class="insertion">This text was <strong>inserted</strong></div>') .appendTo('div.demo-box');

DOM Insertion, Outside

.before()

Demonstration Box

Trigger

$('div.demo-box').before('<div class="insertion"> This text was <strong>inserted</strong></div>');

.insertBefore()

Demonstration Box

Trigger

$('<div class="insertion"> This text was <strong>inserted</strong></div>') .insertBefore('div.demo-box');

.after()

Demonstration Box

Trigger

$('div.demo-box').after('<div class="insertion"> This text was <strong>inserted</strong></div>');

.insertAfter()

Demonstration Box

Trigger

$('<div class="insertion"> This text was <strong>inserted</strong></div>') .insertAfter('div.demo-box');

DOM Insertion, Around

.wrap()

Demonstration Box

Trigger

$('div.demo-box').wrap('<div class="insertion"></div>');

.wrapAll()

Demonstration Box

Trigger

$('div.demo-box').wrapAll('<div class="insertion"></div>');

.wrapInner()

Demonstration Box

Trigger

$('div.demo-box').wrapInner('<div class="insertion"></div>');

DOM Replacement

.replaceWith()

Demonstration Box

Trigger

$('div.demo-box') .replaceWith('<div class="insertion">Replacement Box</div>');

DOM Cloning

.clone()

Demonstration Box

Trigger

$('div.demo-box:last').clone() .insertAfter('div.demo-box:last');

DOM Removal

.empty()

Demonstration Box

Trigger

$('div.demo-box').empty();

.remove()

Demonstration Box

Trigger

$('div.demo-box').remove();