JQuery guide for beginner’s part 4 – Working with HTML elements and text

HI, in previous lesson we worked on manipulating and applying css styles, now we are going to work on HTML elements there are number of ways to manipulate html elements with jquery. We can get and set the html elements using .html() method and if we want modify only text we can use .text() method and later we want to add any content to present content we use .append() method let’s see the bellow examples on these methods.

Using .html() method 

$(document).ready(function(){ 

$(‘.mytext’).html(‘this is my paragraph’);

})

The above code will be replaced the content including html tags inside the ‘.mytext’

Using .text() method

$(document).ready(function(){ 

$(‘.mytext’).text(‘this is my paragraph);

}) 

The above code will be replaced only content excluding html tags inside ‘.mytext’ The difference between both is simple if you give any html tag inside the .text() method it will convert these tags to their html entities and .html() method shows the tag.

Ex: 
.text(‘<p>this is my text</p>’); Will replace like this .text(‘&lt; this is my text &gt;’); 

Using .append() method

The .append() method keep the old content and adds the new content to old content see the bellow example

$(document).ready(function(){ 

$(‘.mytext’).append(‘this is my paragraph);

})