Add or Create Element in jQuery DOM Manipulation (Inside Element)
jQuery append() method
The jQuery append()
method appends specifies content to the end of the HTML elements that have been selected.
Tip: Use the prepend()
method in jQuery to insert content at the start of the selected elements.
Syntax of append method in jQuery
$(selector).append(content,function(index,html))
Example of jQuery append method
To the end of all
elements, add the following content:
$("button").click(function(){
$("p").append("Appended text");
});
jQuery appendTo() Method
The appendTo()
method appends HTML elements to the end of the elements that have been selected.
Use the prependTo()
method to insert HTML elements at the start of the selected elements.
Syntax of appendTo method in jQuery
$(content).appendTo(selector)
Example of jQuery appendTo method
At the end of each
element, add a element:
$("button").click(function(){
$("Hello World!").appendTo("p");
});
jQuery html() method
The html()
method sets or returns the selected elements' content (inner HTML). This method returns the FIRST matched element's content when used to replace content.
The method overwrites ALL matched elements' content when used to set range.
Tip: Use the text()
method to set or return only the text content of the selected elements.
Syntax of html method in jQuery
-
Return content:
$(selector).html()
-
Set content:
$(selector).html(content)
-
Set content using a function:
$(selector).html(function(index,currentcontent))
Example of jQuery html method
Make the following changes to the content of all
elements:
$("button").click(function(){
$("p").html("Hello world!");
});
jQuery prepend() method
The prepend()
method appends the specified content to the beginning of the selected HTML elements.
Use the append()
method to add content to the end of the selected elements.
Syntax of prepend method in jQuery
$(selector).prepend(content,function(index,html))
Example of jQuery prepend method
All
elements should have content at the start:
$("button").click(function(){
$("p").prepend("Prepended text");
});
jQuery prependTo() method
The prependTo()
method adds HTML elements to the beginning of the aspects that have been selected.
Use the appendTo()
method to add HTML elements to the end of the selected elements.
Syntax of prependTo method in jQuery
$(content).prependTo(selector)
Example of jQuery prependTo method
At the start of each
element, add a element:
$("button").click(function(){
$("Hello World!").prependTo("p");
});
jQuery text() Method
The text()
method sets or returns the selected elements' text content.
This method returns the text content of all matched elements when used to produce content (HTML markup will be removed). The text()
method in jQuery overwrites ALL matched elements' content when used to set range.
Syntax for text()
method in jQuery
-
Return text content:
$(selector).text()
-
Set text content:
$(selector).text(content)
-
Set text content using a function:
$(selector).text(function(index,currentcontent))
Example of jQuery text method
Set the text content for all p> elements as follows:
$("button").click(function(){
$("p").text("Hello world!");
});