Lesson 14 Modify Content

❮ Previous Lesson Next Lesson ❯

jQuery can modify the HTML content using the same methods as retrieving contents. The methods are html(), text(), val() and attr().

14.1 The text() Method

The text() method can modify and update the text content of selected elements.

Example 14.1

<!DOCTYPE html>
<html>
<head>
<script>
 $(document).ready(function(){
    $("#btn1").click(function(){
        $("#text1").text("Welcome to jQuery!");
         $("#text2").text("jQuery is fantastic!");
         $("#text3").text("It can enhance your websites!");
    });
});
</script>
</head>
<body>
<p id="text1" style="color:blue">Please change me</p>
<p id="text2" style="color:blue">Please change me too</p>
<textarea id="text3" rows="2" cols="30" style="color:blue">Don't forget to change me too</textarea>
<button id="btn1">Change the content</button>
</body>
</html>

Please change me

Please change me too

14.2 The html() Method

The html() method can modify and update the content of the selected elements using html markup tags.

Example 14.2

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
  $("#btn2").click(function(){
        $("#text1").html("<h1>Changed to heading 1</h1>");
         $("#text2").html("<i>Changed to italic style</i>");
         $("#text3").html("<b>Change to bold font</b>");
    });
});
</script>
</head>
<body>
<p id="text4">Please change me</p>
<p id="text5">Please change me too</p>
<p id="text6">Don't forget to change me too</p>
<button id="btn2">Change the content</button>

</body>
</html>

Please change me

Please change me too

Don't forget to change me too

14.3 The val() Method

The val() method can modify the value of form fields.

Example 14.3

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
   $("#btn3").click(function(){
        $("#fname").val("Kevin");
          $("#lname").val("Anderson");
    });
});
</script>
</head>
<body>
<p>First Name: <input type="text" id="fname" value="Roger"></p>
<p>Last Name: <input type="text" id="lname" value="Federer"></p>
<button id="btn3"<Change Name</button></p>

</body>
</html>

First Name:

Last Name:

14.4 The attr() Method

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

Example 13.4

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
     $("btn5").click(function(){
        $("#mylink").attr({
            "href" : "https://javascript-tutor.netjQuery/jqry_lesson2.html",
            "title" : "jQuery_lesson2"
        });
        $("#jqry2").attr({
            "color" : "blue",
            });
            $("#jqry1").attr({
            "align" : "left",
            });
            $("#lady").attr({
            "src" : "twin.jpg",
            });
    });
});
</script>
</head>
<body>
<p><a href="https://javascript-tutor.netjQuery/jqry_lesson1.html" title="jQuery_lesson1" id="mylink">jQuery Tutorial</a></p>
<p id="jqry1" align="center"><font id="jqry2" color="red">jQuery Lessons</font></p>
<p><img src="ladybug.gif" style="width:10%; height:auto;" id="lady"></p>
<button id="btn5">Change href,title, alignment and image</button>
<p>Move the mouse over the link to see the change in title and link.</p>
<button id="btn5">Show Attribute Value</button>
</body>
</html>

jQuery Tutorial

jQuery Lessons

Move the mouse over the link to see the change in title and link.

❮ Previous Lesson Next Lesson ❯