Adding Content
 

As we have seen in the previous lessons, the html() and text() methods can be used to get and set the content of a selected element. However, when these methods are used to set content, the existing content is lost.
jQuery has methods that are used to add new content to a selected element without deleting the existing content:
append() inserts content at the end of the selected elements.
prepend() inserts content at the beginning of the selected elements.
after() inserts content after the selected elements.
before() inserts content before the selected elements.  

NOTE!
Write code and test every method at least one time.

Adding Content
 

The append() method inserts content AT THE END of the selected HTML element.
For example:
HTML:

<p id=“demo”>Hi </p> 

 

JS: 

$(function() {
  $("#demo").append("David");
});
//Outputs "Hi David" 

 

NOTE!
Similarly, the prepend() method inserts content AT THE BEGINNING of the selected element. You can also use HTML markup for the content.

Adding Content ]/su_heading] 

The jQuery after() and before() methods insert content AFTER and BEFORE the selected HTML element.
For example:
HTML:

<p id="demo">Hi</p> 

 

JS: 

 

$(function() {
  $(“#demo”).before(“<i>Some Title</i>”);  
  $(“#demo”).after(“<b>Welcome</b>”);
}); 

 


Adding New Elements