Description
jQuery DOM (Document Object Model) offers a number of in-built methods that are used change or manipulate the HTML elements efficiently or attributes of HTML elements.
New elements can be added to the existing DOM and remove or replace existing elements with the help of jQuery DOM methods. Some of the methods include
htmlappendprependafterbeforeremoveempty
Description
The
html() method is used to change selected elements and attributes. It also brings the HTML contents (innerHTML) of the initially matched element. Below is the syntax for html method.
Syntax:
$(selector).html(content);
Example
In the below example .html() method and .click() functions are used. Here .html() retrieves HTML content from the object and then when clicked on the element value of the object is set using passed parameter.
[html]
<html>
<head>
<title>jQuery DOM</title>
</head>
<body>
<h1>Welcome to SPLessons</h1>
<div>
<p>click on this paragraph</p>
</div>
</body>
</html>
[/html]
[javascript]
$(document).ready(function() {
$("p").click(function(){
$(this).html("This is a paragraph");
});
});
[/javascript]
Output:
Description
append() method is used to insert the data at the end or as the last child of the matched element in the jQuery collection.
The append() and appendTo() methods are similar.
Syntax:
$(selector).append(content, function(index, html))
Content is mandatory. Index and html are optional parameters. Example
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery DOM</title>
</head>
<body>
<h1>Welcome to SPLessons</h1>
<div>
<p>This is a paragraph</p>
</div>
<button>Click to append the content to p element</button>
</body>
</html>
[/html]
[javascript]
$(document).ready(function() {
$("button").click(function(){
$("p").append(" after clicking content appended");
})
});
[/javascript]
Output:
Description
prepend() method is used to insert the content at the starting or as the first child of the matched element. It is opposite of the jQuery append() method.
To insert the data at the end of the elements,use the append method.
Syntax:
$(selector).prepend(content,function(index,html))
Content is mandatory. Index and html are optional parameters. Example
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery DOM</title>
</head>
<body>
<h1>Welcome to SPLessons</h1>
<div>
<p>This is a paragraph</p>
</div>
<button>Click to prepend the content to p element</button>
</body>
</html>
[/html]
[javascript]
$(document).ready(function() {
$("button").click(function(){
$("p").prepend(" after clicking content prepended ");
})
});
[/javascript]
Output:
Description
after() method is used to insert the content after matched element.This is similar to jQuery append() method.
To insert content before the selected element, use jQuery before() method.
Syntax:
$(selector).after(content,function(index))
Example
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery DOM</title>
</head>
<body>
<h1>Welcome to SPLessons</h1>
<div>
<p>This is a paragraph</p>
</div>
<button>Click to add the content after p element</button>
</body>
</html>
[/html]
[javascript]
$(document).ready(function() {
$("button").click(function(){
$("p").after(" after clicking content added");
})
});
[/javascript]
Output:
Description
before() method is used to insert the content before matched element. It adds the content specified by the parameter, before each element in the set of matched elements.
Syntax:
$(selector).before(content, function(index))
Example
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery DOM</title>
</head>
<body>
<h1>Welcome to SPLessons</h1>
<div>
<p>This is a paragraph</p>
</div>
<button>Click to add the content before p element</button>
</body>
</html>
[/html]
[javascript]
$(document).ready(function() {
$("button").click(function(){
$("p").before("after clicking content added");
})
});
[/javascript]
Output:
Description
remove() method removes the selected HTML element from the DOM. It removes the selected element itself, as well as everything inside it (including all texts and child nodes). This method also removes the data and the events of the selected elements.
Syntax:
$(selector).remove(content);
Example
[html]
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
</head>
<body>
<h1>Demo: jQuery remove() method </h1>
<div>This is div.
<label>This is label.</label>
</div>
</body>
</html>
[/html]
[javascript]
$(document).ready(function () {
$('label').remove();
});
[/javascript]
Output:
Description
All the child elements of the selected HTML element are removed by
empty() method. This method doesn't remove the element itself. To remove the element without removing data and events, use the method detach().
Syntax:
$(selector).empty(content);
Example
[html]
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div>
This is some text
<p>This is a paragraph inside the div</p>
</div>
<p>This is a paragraph outside the div.</p>
<button>Remove content of the div element</button>
</body>
</html>
[/html]
[javascript]
$(document).ready(function(){
$("button").click(function(){
$("div").empty();
});
});
[/javascript]
Output:
Key Points
- New elements can be added to the existing DOM and remove or replace existing elements with the help of jQuery DOM methods.
- html,append,prepend,after,before,remove and empty are the jQuery DOM methods.