jQuery: 2 DOM manipulation examples

We use 2 simple examples to illustrate DOM manipulation concepts.

.after()
Insert content, specified by the parameter, after each element in the set of matched elements.
<!doctype html>
<html>
<head>
    <title>after demo</title>
    <style>
        p {
            background: yellow;
        }
    </style>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
</head>
<body>

<p>I would like to say: </p>

<script>
    $('p').after('<b>Hello</b>');
</script>

</body>
</html>

Try The Code

From the example above, you could see that the Hello text is inserted after the <p> elements.

.append()
Insert content, specified by the parameter, to the end of each element in the set of matched elements.

Whereas, the text in the example below is inserted immediately after the elements using append.  This can also be called inline or in the same line insertion.

<!doctype html>
<html>
<head>
    <title>append demo</title>
    <style>
        p {
            background: yellow;
        }
    </style>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
</head>
<body>

<p>I would like to say: </p>

<script>
    $('p').append('<strong>Hello</strong>');
</script>

</body>
</html>
Try The Code
Series Navigation<< jQuery: Dom Manipulation
jQuery: Common DOM manipulation methods >>