jQuery - SPLessons

Chapter 7

jQuery DOM

jQuery DOM

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

jQuery Changing HTML Contains

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);
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>
	<head>
	   <title>jQuery DOM</title>
	</head>

	<body>
		<h1>Welcome to SPLessons</h1>
		<div>
			<p>click on this paragraph</p>
		</div>
	</body>
</html>

$(document).ready(function() {
    $("p").click(function(){
       $(this).html("This is a paragraph");
 });
     
 });

Output:

append() method

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.

<!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>

$(document).ready(function() {
    $("button").click(function(){
       $("p").append("  after clicking content appended");
    })
     
 });

Output:

prepend() method

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.

<!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>

$(document).ready(function() {
    $("button").click(function(){
       $("p").prepend("  after clicking content prepended  ");
    })
     
 });

Output:

after() method

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))

<!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>

$(document).ready(function() {
    $("button").click(function(){
       $("p").after("  after clicking content added");
    })
});

Output:

before() method

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))

<!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>

$(document).ready(function() {
    $("button").click(function(){
       $("p").before("after clicking content added");
    })
     
 });

Output:

remove() method

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);

<!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>
        $(document).ready(function () {
           $('label').remove();
        });

Output:

empty() method

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);

<!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>
$(document).ready(function(){
    $("button").click(function(){
        $("div").empty();
    });
});

Output:

Summary

  • 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.