jQuery Methods: 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();