Lesson 13 Get Content

❮ Previous Lesson Next Lesson ❯

jQuery has the ability to retrieve , manipulate and update the content of HTML elements and its attributes. It achieves the aforementioned tasks using a number of DOM related methods. DOM stands for Document Object Model which defines the standard for accessing HTML and XML documents.

The methods we wish to discuss here are text(), html(), val() and attr().

13.1 The text() Method

The text() method retrieves and displays the text content of selected elements.

Example 13.1

In this example, we use the text() method to retrieve and display a hidden text.

<!DOCTYPE html>
<html>
<head>
<script>
 $(document).ready(function(){
   $("#btn1").click(function(){
        var text1=$("#htext").text();
        $("#mytext").text(text1);
    });
});
</script>
</head>
<body>
<p id="htext" style="display:none">The hidden text is hacker007</p>
<p id="mytext" style="font-size:120%; color:blue"></p>

<button id="btn1">Show Hidden Text</button>
</body>
</html>

13.2 The html() Method

The html() method retrieves and displays the content of the selected elements including the html markup tags.

Example 13.2

This example illustrates the difference between text() and html() methods.

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
  $("#btn2").click(function(){
        var text1=$("#htext1").text();
        $("#mytext1").text(text1);
    });
    
    $("#btn3").click(function(){
        var text2=$("#htext1").html();
        $("#mytext2").html(text2);
    });
});
</script>
</head>
<body>
<p id="htext1" style="visibility:hidden">The<em>hidden text</em> is <strong>hacker007</strong></p>
<textarea rows="2" cols="50" id="mytext1" style="font-size:20px; color:blue;"></textarea><br>
<textarea rows="2" cols="70" id="mytext2" style="font-size:20px; color:blue"></textarea>
<button id="btn2">Show Plain Text</button>
<button id="btn3">Show Text in HTML Format</button>

</body>
</html>

The hidden text is hacker007

13.3 The val() Method

The val() method retrieves and displays the value of form fields

Example 13.3

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
   $("#btn4").click(function(){
        var name1=$("#fname").val();
       var name2= $("#lname").val();
       $("#first").text(name1);
       $("#second").text(name2);
    });
});
</script>
</head>
<body>
First name:<input id="fname" type="text" name="firstname" value="George">
Last name:<input id="lname" type="text" name="lastname"  value="Washington">
<p>First name is <span style="color:blue" id="first"></span></p>
<p>Last name is <span style="color:red" id="second"></span></p>
<button id="btn4">Click to see values</button>

</body>
</html>

First name:

Last name:

First name is

Last name is

13.4 The attr() Method

The jQuery attr() method retrieves and displays HTML attribute values. Some of the attributes are href, src, id, style, title and more

Example 13.4

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn5").click(function(){
      var myattr=$("#lady").attr("src");
      $("#atr").text(myattr);
    });
});
</script>
</head>
<body>
<p><img src="ladybug.gif" style="width:10%; height:auto;" id="lady"></p>
<p>The attribute value is <span id="atr" style="color:red"></span><</p>

<button id="btn5">Show Attribute Value</button>
</body>
</html>

The attribute value is

Example 13.5

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn6").click(function(){
       var mySrc=$("#lady2").attr("src");
        var myId=$("#lady2").attr("id");
        var myStyle=$("#lady2").attr("style");
        var myHref=$("#jQuery").attr("href");
        $("#mysrc").text(mySrc);
         $("#myid").text(myId);
          $("#mystyle").text(myStyle);
           $("#myhref").text(myHref);
    });
});

</script>
</head>
<body>
<p><img src="ladybug.gif" style="width:10%; height:auto;" id="lady2"></p>
<p><a href="https://javascript-tutor.net/jquery/jqry_tutor.html" id="jQuery" >jQuery Tutorial</a></p>
<p> The SRC value is <span id="mysrc" style="color:blue"></span></p>
<p>The ID value is <span id="myid" style="color:blue"></span></p>
<p> The Style value is <span id="mystyle" style="color:blue"></span></p>
<p> The HERF value is <span id="myhref" style="color:blue"></span></p>
<button id="btn6">Show Attribute Values</button>
</body>
</html>

jQuery Tutorial

The src value is

The id value is

The style value is

The href value is

❮ Previous Lesson Next Lesson ❯