Easiest way to learn various technology: JQUERY with HTML & CSS

5/01/2018

JQUERY with HTML & CSS

hi,

main difference between text & html method

Sometimes, i think both are same to set or return the html content. But, the jQuery text() method is different from html() method.
Following is the main differences:

The jQuery text() method is used to set or return html content without HTML markup while, html() method is used to set or return the innerHtml (text + HTML markup).
The jQuery text() method can be used in both XML and HTML document while jQuery html() method can not.

syntax are three ways,
$(selector).text();
$(selector).text("abcd");
$(selector).text(function(index,currentcontent)) ;

if you look above syntax there are difference in all syntax ,
above first syntax is use for return or get text content in html tag.
second syntax is use for set content in html tag
& third is using function.

an example of html & jquery

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("hi abc!");
});
});
</script>
</head>
<body>
<button>hi click me</button>
<p>Hello Guys!</p>
<p>Looking for online training....</p>
</body>
</html>

try code & run in browser you can view output.

similarly html method happen but it change all entire content.

$(selector).html()
$(selector).html(content)
$(selector).html(function (index, currentcontent))

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            alert($("p").html());
        });
    });
    </script>
</head>
<body>

<button>Return the content of p element</button>

<p>
This is first <b>paragraph</b>.</p>
<p>
This is another <b>paragraph</b>.</p>
</body>
</html>

in next session we view more method such as before() , prepend(), append(), empty(), detach(), scrolltop(), delay()