jQuery DOM Manipulation: In-depth Analysis of append(), prepend(), after() and before() Methods

Core Concepts and Fundamental Differences

In the jQuery library, .append(), .prepend(), .after(), and .before() are four commonly used DOM manipulation methods. While they all serve to insert content, they differ fundamentally in insertion position and element relationships. Understanding these differences is crucial for writing efficient and maintainable front-end code.

Internal Insertion Methods: append() and prepend()

The .append() method inserts specified content as the last child of the target element, while .prepend() inserts content as the first child. Both methods establish a parent-child relationship between the target and inserted content.

Consider the following HTML structure:

<div class='a'>
  <div class='b'>b</div>
</div>

When executing $('.a').append($('.c')), the result becomes:

<div class='a'>
  <div class='b'>b</div>
  <div class='c'>c</div>
</div>

When executing $('.a').prepend($('.c')), the result becomes:

<div class='a'>
  <div class='c'>c</div>
  <div class='b'>b</div>
</div>

External Insertion Methods: after() and before()

The .after() method inserts specified content after the target element, while .before() inserts content before the target element. Both methods establish a sibling relationship between the target and inserted content.

Using the same initial HTML structure, after executing $('.a').after($('.c')):

<div class='a'>
  <div class='b'>b</div>
</div>
<div class='c'>c</div>

After executing $('.a').before($('.c')):

<div class='c'>c</div>
<div class='a'>
  <div class='b'>b</div>
</div>

Practical Application Scenarios

In actual development, the choice of method depends on specific business requirements:

When adding content inside an element, use .append() or .prepend(). For example, use .append() to add new items to the end of a list, and .prepend() to add items to the beginning of a list.

When adding content outside an element, use .after() or .before(). For example, use .after() to insert notification messages after a specific div, and .before() to insert separators before it.

Method Chaining Characteristics

These jQuery methods support chaining, which is an important feature. Each method returns the original jQuery object, allowing consecutive calls to multiple methods:

$('.container')
  .append('<p>First paragraph</p>')
  .append('<p>Second paragraph</p>')
  .addClass('highlight');

Comparison with Modern JavaScript

Modern JavaScript natively provides similar DOM manipulation methods. For example, the Element.prepend() method can achieve the same functionality without using jQuery:

let div = document.createElement("div");
let p = document.createElement("p");
let span = document.createElement("span");
div.append(p);
div.prepend(span);
console.log(div.childNodes); // NodeList [ <span>, <p> ]

The advantage of native methods lies in better performance and fewer dependencies, but jQuery offers better browser compatibility and a more concise API.

Summary and Best Practices

Understanding the fundamental differences between these four methods is essential for writing high-quality jQuery code. The key distinction is that .append() and .prepend() create parent-child relationships, while .after() and .before() create sibling relationships.

In practical projects, it is recommended to:

• Choose the appropriate method based on element relationship requirements
• Utilize method chaining to improve code readability
• Consider using native DOM methods in performance-sensitive scenarios
• Maintain code consistency by avoiding mixing insertion methods with different logical purposes