Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment


Locations of visitors to this page


Latest Articles


Move to top
Playing with HTML using Jquery
Posted By Sarin on Apr 21, 2012     RSS Feeds     Latest Hinduism news
2605 Views

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

Share this to your friends. One of your friend is waiting for your share.
Share on Google+ Share on Tumblr Print Browser Favorite
Related Articles
Get Set Value of any HTML element using jquery-Val function
Playing with HTML using Jquery
Call JavaScript functions from silverlight
Jquery features, Advantages and disadvantages
Science in Hinduism-Gravitational force and repulsive force
Advanced JQuery Fading Effects
JQuery FAQ and Jquery Effects
Manipulating Elements and Animations Using Jquery
Select range of HTML elements using Jquery slice function
Ge the total number of HTML elements in a page

Post Comment