12

DOM Manipulation

General Attributes

.attr(attribute)

Demonstration Box
Trigger

.toggleClass(class)

Demonstration Box
Trigger

.html()

Demonstration Box
Trigger

.val()

Demonstration Box
Trigger

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>');

DOM Copying

.clone()

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

.clone(false)

Demonstration Box
Trigger
$('div.demo-box:last').clone(false) .insertAfter('div.demo-box:last'); $('div.demo-box').append('<p>New Message</p>);

DOM Removal

.empty()

Demonstration Box
Trigger
$('div.demo-box').empty();

.remove()

Demonstration Box
Trigger
$('div.demo-box').remove();