Playing with HTML using Jquery
JQuery helps us in modification of html at runtime or changing text of any html element according to our requirement, very easier with just few lines of code.
Lets us directly jump to our example:
Get HTML Content of html elements:
Html Function is used to get the contents of any html element
After you get HTML content, you can place it inside any other HTML element on the page.
1. Create a Web page containing the following code:
<html>
<head>
<title>My Test Page<title>
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(':submit').click(function () {
var strongContent = $('strong').html();
var pContent = $('p').html();
$('strong').html(pContent);
$('p').html(strongContent);
});
});
</script>
</head>
<body>
<strong>This is STRONG element.</strong>
<p>This is Paragraph element.</p>
<input type="submit" value="Change" />
</body>
</html>
2. in the above code, we have declared variable to get text of strong and paragraph elements using html funciton
var strongContent = $('strong').html();
var pContent = $('p').html();
The first line gets the HTML content inside the <strong> element and stores it in the strongContent variable. The second line stores the content of the <p> element in the pContent variable.
3. Now again we will use html function but This time, we will set content of html elements using html function as shown below.
$('strong').html (pContent);
$('p').html (strongContent);
The first line puts the HTML code stored in pContent in the <strong> element. The second puts the HTML code stored in strongContent in the <p> element
4. Save the file, and then view it in your browser.
Note the text in the <strong> and <p> elements. Both all of these tags have some text in between.
On click of the button, we will interchange the content of these two elements as shown below
Get Text Of html elements
Sometimes you don’t want the actual HTML code in an element; you want only the text. To do so, replace the html() function with the text() function.
Text function will simply return the text of the html element. If the return text contains any html tags, it will remove it from return text.
You can retrieve text content from any element on your page that contains text by using a selector and the text() function. The text() function will not work with values typed into text boxes. To get values typed into form elements, use val() function.
5. Let adds the corresponding html elements and JQuery function for text function
<strong id="strong">This is the text in the <b>STRONG</b> element</strong>
<p id="paragraph">
This is the text in the <i>P</i> element</p>
<input id="btnchange" type="button" value="Change" />
$('#btnchange').click(function () {
var strongContent = $('#strong').text();
var pContent = $('#paragraph').text();
$('#strong').text(pContent);
$('#paragraph').text(strongContent);
});
Output of the above code are as follows:
Note that the <i> and <b> tags are no longer present since it is removed by text function, so nothing is italicized nor bold. Using the text() method strips out HTML elements.
here
Note: Images used on this website
are either a production of Bhaktivedanta Book Trust(https://www.krishna.com), Iskcon
Foundation or were found in google search under "Free to use and share". If any
of the images presented here violates copyright issues or infringes anyone copyright
or are not under "Fair use", then please bring it to our notice. Read
Disclaimer for more.
Share this to your friends. One of your friend is
waiting for your share.
Related Articles
Advanced JQuery Fading Effects
Select Parent, Child, sibling,descendants HTML element using jquery
Call JavaScript functions from silverlight
Replacing and removing HTML Elements
Playing with HTML using Jquery
Ge the total number of HTML elements in a page
Generation and use of electricity in vedic era
Changing CSS Properties of HTML element using JQuery
JQuery FAQ and Jquery Effects
Select Groups of similar elements using position selector
Post Comment