jQuery DOM manipulation

Before we used to go like this:

var elem = document.getElementById('target');
elem.innerHTML += '<strong>hello</strong>';

Nowadays with jQuery things are simpler and we can go:

$('#target').append('<strong>hello</strong>');

jQuery comes with a bunch of DOM manipulation functions and chaining them can give you really wicked results. The trick is to know what order to chain them in. Here is the documentation for all such methods.

For the below examples consider this piece of HTML code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DOM manipulations</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="target">old text</div>
<script>
// Javascript goes here
</script>
</body>
</html>

append, prepend, before, after, empty, remove

$('#target')
	.append('<strong>111</strong>')
	.append('<i>222</i>')
	.append('333')
	.append('444');

Gives: <div id=”target”>old text111222333444</div>

Get rid of “old text” with empty()

$('#target')
	.empty()
	.append('<strong>111</strong>')
	.append('<i>222</i>')
	.append('333')
	.append('444');

Gives: <div id=”target”>111222333444</div>

$('#target')
	.prepend('<strong>111</strong>')
	.prepend('<i>222</i>')
	.prepend('333')
	.prepend('444');

Gives: <div id=”target”>444333222111old text</div>

$('#target')
	.after('<strong>111</strong>')
	.after('<i>222</i>')
	.after('333')
	.after('444');

Gives: <div id=”target”>old text</div>444333222111

$('#target')
	.before('<strong>111</strong>')
	.before('<i>222</i>')
	.before('333')
	.before('444');

Gives: 111222333444<div id=”target”>old text</div>

NOTE: in the entire chain each call returns the original element $(‘#target’). This means we are always appending, prepending, before-ing, and after-ing to the same element, not any of the append-ED, prepend-ED (etc) elements such as <strong>111</strong>.

var result = $('#target')
	.after('<strong>111</strong>')
	.after('<i>222</i>')
	.before('333')
	.before('444');
console.log(result);

Gives: 333444<div id=”target”>old text</div>222111

And console prints: Object[div#target]

Similarly,

var result = $('#target')
	.append('<strong>111</strong>')
	.append('<i>222</i>')
	.prepend('333')
	.prepend('444');
console.log(result);

Gives: <div id=”target”>444333old text111222</div>

So if we want to replace <div> (and by replace I mean completely remove it and add new elements (PLURAL) in its place) we must “before” it with the list of elements we want to replace it with, and then call remove()

$('#target')
	.before('<strong>111</strong>')
	.before('<i>222</i>')
	.before('333')
	.before('444')
	.remove();

Gives: 111222333444

Unless you “after” them and thus have them in reverse order:

$('#target')
	.after('<strong>111</strong>')
	.after('<i>222</i>')
	.after('333')
	.after('444')
	.remove();

Gives: 444333222111


  1. Quyen says:

    I see a lot of interesting content on your blog.
    You have to spend a lot of time writing, i know how to save you a lot of time,
    there is a tool that creates unique, google friendly posts in couple of minutes,
    just search in google – laranita’s free content source

  2. Elisabeth says:

    I read a lot of interesting content here. Probably
    you spend a lot of time writing, i know how to save you a
    lot of work, there is an online tool that creates unique, google friendly articles in minutes,
    just type in google – k2seotips unlimited content

Leave a Reply

Your email address will not be published.