Getting and setting content

Retrieving and setting text, values and HTML is the simplest aspect of manipulation of DOM. It seems same but they’re not. There are text(), html() and val() methods.

jQuery html() method

Using the jQuery HTML method, you can change the entire content of the selected element and replace them with the new content. Here is the example of get the content:
<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("#btn2").click(function(){  
        alert("HTML: " + $("#test").html());  
    });  
});  
</script>  
</head>  
<body>    
<h2 id="test"> Welcome to <b>tutorialandexample.com</b></h2>    
<button id="btn2">Click here to show HTML</button>    
</body>  
</html>
Try Now Here is the example of set the content with the jQuery html() methods:
<!DOCTYPE html>  
<html>  
<head>    
<title>jQuery html() example</title>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
<script>    
$(document).ready(function(){    
    $("button").click(function(){    
        $("p").html("Welcome to <b>tutorialandexample.com </b>");    
    });    
});    
</script>    
</head>    
<body>      
<button>click here to change p elements content </button>      
<p>This is the first paragraph.</p>    
<p>This is the second paragraph.</p>     
</body>    
</html>
Try Now

jQuery text() method

jQuery text() method is used to set or return the text content of selected elements without HTML markup. Using the jQuery HTML method, you can change the entire content of the selected element and replace them with the new content. Here is the example to get the content using the text() method:
<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("#btn2").click(function(){  
        alert("TEXT: " + $("#test").text());  
    });  
});  
</script>  
</head>  
<body>   
<p id="test"> Welcome to <b>tutorialandexample.com </b></p>   
<button id="btn2">Click here to Show TEXT</button>   
</body>  
</html>  
Try Now
Here is the example of set the content using the text() method:
<!DOCTYPE html>  
<html>  
<head>    
<title>jQuery text() example</title>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
<script>    
$(document).ready(function(){    
    $("button").click(function(){    
        $("p").text("Welcome to tutorialandexample.com");    
    });    
});    
</script>    
</head>    
<body>     
<p>This is the first paragraph.</p>    
<p>This is the second paragraph.</p>     
<button>click here to change p elements content </button>     
</body>    
</html>
Try Now

jQuery val() method

jQuery val() method is used to set or return the value of form fields. It is used to get first element’s current value in the set of matched elements and also set every matched element value. To get the value of an input field using the val() method:
<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        alert("Value: " + $("#test").val());  
    });  
});  
</script>  
</head>  
<body>    
<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>   
<button>Click here to Show Value</button>    
</body>  
</html>
Try Now Here the example to set the value of an input field using the val() method:
<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<script>  
$(document).ready(function(){    
    $("#btn3").click(function(){  
        $("#test3").val("Chetan bhagat");  
    });  
});   
</script>  
</head>  
<body>    
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>   
<button id="btn3">Click here to Set Value</button>    
</body>  
</html>
Try Now



ADVERTISEMENT
ADVERTISEMENT