Let us learn JQuery - Part 5 of 9 (DOM with JQuery)

Niladri.Biswas
Posted by in jQuery category on for Beginner level | Points: 250 | Views : 2021 red flag
Rating: 5 out of 5  
 1 vote(s)

In this article we will learn JQuery Dom Manipulation methods


 Download source code for Let us learn JQuery - Part 5 of 9 (DOM with JQuery)

Table of Content

  1. Introduction
  2. Common JQuery Dom manipulation methods
    1. text()
    2. html()
    3. val()
    4. attr()
    5. removeAttr()
    6. prepend()
    7. append()
    8. remove()
    9. clone()
    10. References
    11. Conclusion

     

  3. Introduction

    JQuery can read and manipulate the DOM of the HTML page using a set of simple methods.This is the fifth part of the series.The complete series is as under

    1. JQuery - A formal introduction using "Hello World"
    2. JQuery Selectors
    3. JQuery Traversal
    4. CSS with JQuery
    5. DOM with JQuery
    6. JQuery and Events
    7. Animated effects using JQuery
    8. JQuery and Ajax
    9. Custom JQuery Plugins

    Common JQuery Dom manipulation methods

    1.text()

    The text() method can read or write the text inside a given HTML element. Here is an example:

    <head runat="server">
        <title></title>
        <script type="text/javascript" src="Scripts/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#btn").click(function () {
                    var initialContent = $('p').text();
                    $('p').text("Content of the paragraph has changed");
                })
    
            });
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="parentDiv">         
             <p>This is a paragraph.</p>       
             <input type="button" id="btn" value="Click Me!"/>         
        </div>
        </form>
    </body>
    

    The

    var initialContent = $('p').text();

    will return the text of the selected HTML element.

    $('p').text("Content of the paragraph has changed")

    In the above case the text("Content of the paragraph has changed") method takes a string parameter and replace the existing text of the HTML element, with the new, given text.

    2.html()

    The html() method works much like the text() method, except the method returns the HTML of a given element, not just the text. Here is an example:

    $(document).ready(function () {
                $("#btn").click(function () {
                    var initialContent = $('p').html();
                    $('p').html("<b>Content of the paragraph has changed</b>");
                })
            });
    

    The

    var initialContent = $('p').html();

    will return the HTML of the selected element.

    $('p').html("<b>Content of the paragraph has changed</b>");

    In the above case the html("<b>Content of the paragraph has changed</b>"); method takes a string parameter and sets the HTML of the selected element.

    3.val()

    The val() method is used to get and set the value of form fields

    $("#btn").click(function () {
    	var initialContent = $('#txt1').val();
    	alert(initialContent);
    	$("#txt1").val("now the content change")
    })
    

    The val() method that does not take parameters, is allowing to read the content of the textbox.

    The val("now the content change") method will set a new content to the textbox.

    4.attr()

    The attr() function can read and write attributes of HTML elements

    $("img").attr("height","600");

    The above code will read the image "height" attribute value.

    $("img").attr( {height:"600" });

    The above code will set the image "height" attribute value.

    5.removeAttr()

    The removeAttr() method is used to remove an attribute from an HTML element

    $("img").removeAttr('height');

    Removes the height attribute

    6.prepend()

    The prepend() method inserts new HTML into the beginning of the selected HTML element

    <head id="Head1" runat="server">
        <title></title>
        <script type="text/javascript" src="Scripts/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#btn").click(function () {                
                    $('p').prepend("<b>This is prepended text</b>");
                })
    
            });
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="parentDiv">         
             <p>This is a paragraph.</p>       
             <input type="button" id="btn" value="Click Me!"/>         
        </div>
        </form>
    </body>
    

    The result will be

    The new HTML is concatenated with the HTML the element already had.

    7.append()

    The append() method inserts new HTML into the end of the selected HTML element.

    <head id="Head1" runat="server">
        <title></title>
        <script type="text/javascript" src="Scripts/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#btn").click(function () {
                    $('p').append("<b>This is append text</b>");
                })
    
            });
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="parentDiv">         
             <p>This is a paragraph.</p>       
             <input type="button" id="btn" value="Click Me!"/>         
        </div>
        </form>
    </body>
    

    The result will be

    The new HTML is concatenated with the HTML the element already had.

    8.remove()

    The remove() method removes the selected HTML element from the DOM. E.g.

    $('#id').remove();

    9.clone()

    The clone() method clones the selected element, so we can insert a copy of it somewhere else in the DOM.

    var clone = $('#id').clone();
    clone.insertBefore('#nextElement');
    

    References

    For a complete list of JQuery Dom Manipulation functions please visit Manipulation

    Conclusion

    Hope that we have a fair idea by now about JQuery Dom Manipulation methods and their usage.If not, we will revisit it again and will go through it properly.We will proceed to the next section once we are through with the current one.Thanks for reading.The attached zip file contains all the examples being demonstrated here.

Page copy protected against web site content infringement by Copyscape

About the Author

Niladri.Biswas
Full Name: Niladri Biswas
Member Level: Platinum
Member Status: Member
Member Since: 10/25/2010 11:04:24 AM
Country: India
Best Regards, Niladri Biswas
http://www.dotnetfunda.com
Technical Lead at HCL Technologies

Login to vote for this post.

Comments or Responses

Posted by: Ermahesh2009 on: 4/23/2014 | Points: 25
hey friend
best article and explanation till now but where is 6-9 articles ..
please share or mail me at er.mahesh2009 at gmail.com

Login to post response

Comment using Facebook(Author doesn't get notification)