jQuery Append HTML

Introduction

jQuery is a popular JavaScript library that simplifies the process of manipulating HTML elements and managing events. One of its key methods is append(), which allows you to add content to an HTML element.

Syntax

The syntax for append() method is as follows:

$(selector).append(content);

• selector: Specifies the target HTML element where the content will be appended.
• content: Can be a string, HTML element, or jQuery object specifying the content to be appended.

Examples

Appending a String

You can append a string of HTML content to an element using the append() method. For example:

$('#myElement').append('<p>Hello, World!</p>');

This will append the <p>Hello, World!</p> string as a child to the element with id "myElement".

Appending an HTML Element

You can also append an existing HTML element to another element. For example:

var newElement = document.createElement('div');
newElement.textContent = 'New Element';

$('#myElement').append(newElement);

In this example, a new div element with the text content "New Element" is created and appended to the element with id "myElement".

Appending a jQuery Object

If you have a jQuery object representing an HTML element, you can directly append it to another element. For example:

var $newElement = $('<div>New Element</div>');

$('#myElement').append($newElement);

This will append the $newElement jQuery object, which represents a div element with the text content "New Element", to the element with id "myElement".

Conclusion

In this introduction to the append() method in jQuery, we have seen how to append HTML content to elements. Whether you need to append strings, HTML elements, or jQuery objects, the append() method provides a versatile way to add content dynamically to your web page.