Modifying the inner content of the HTML (jQuery)

Modifying the inner content of the HTML

Consider the following code for modifying the inner content of the HTML elements:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-9961622779713084",
    enable_page_level_ads: true
  });
</script>
<SCRIPT type="text/javascript"  src="jquery-1.8.3.js"></SCRIPT>
<SCRIPT type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#para").prepend("<B>jQuery</B>");
$("#para").append("<B>append() function</B>.");
$("#para").after('<H3>This is the newly inserted heading.</H3>');
$("#newhead").remove();
});
});
</SCRIPT>
</HEAD>
<BODY>
<DIV align="center">
</DIV>
<H3>Complete the Sentence:</H3>
<P ID="para"> is a javascript library that enables the content to be appended after the inner content  in the selected element using the </P><BR>
<H2 ID="newhead">This heading would be removed.</H2>
<BUTTON ID="b">Click Here</BUTTON>
</BODY>
</HTML>

In the preceding code, when the user clicks  the Click here button, the content, jQuery,  is appended before the <P> tag having the ID, para , by using the prepend() function.
Similarly, the content , append() function, is appended after the  same <p> tag  by using the append () function.

In addition, a new <H3> tag is inserted after the <P> tag having the ID, para, by using the after () function. Finally the heading having the ID , newhead, is removed by using the remove ()function.

Before the Click here button is clicked, the Web page appears



After the Click here button is clicked, the Web page  appears





About Codingwelove

Codingwelove
Recommended Posts × +

0 comments:

Post a Comment