jQuery Getters & Setter, Easy To Learn jQuery Getters & Setter

jQuery - Get Content and Set Connect Attributes

jQuery contains powerful methods for changing and manipulating HTML elements and attributes.

jQuery DOM Manipulation

DOM is the very important part of jQuery. The jQuery comes with a bunch of DOM related methods that make it easy to access and manipulate elements and attributes.

Get Content and Set Content Â Attributes - text(), html(), and val().

Three simple, but useful, jQuery methods for DOM manipulation are :

text() : Sets or returns the text content of selected elements

html() : Sets or returns the content of selected elements (including HTML markup)

val() : Sets or returns the value of form fields.

The following example demonstrates how to get and set content with the jQuery text(), html(), and val() methods :

Get Content - text(), html(), and val()

<!DOCTYPE html>
<html>
<head>
<title>Get Content - text(), html(), and val()</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("#btn1").click(function(){
        alert("Text: " + $("#test").text());
    });
    $("#btn2").click(function(){
        alert("HTML: " + $("#test").html());
    });
$("#btn3").click(function(){
        alert("Value: " + $("#test_val").val());
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>

<body>
 
<p id="test">This is some <b>bold</b> text in a paragraph.</p>

<button type="button" id="btn1" class="btn">Show Text</button>
<button type="button" id="btn2" class="btn">Show HTML</button>
 
 
<p>Name: <input type="text" id="test_val" value="Free Time Learning"></p>

<button type="button" id="btn3" class="btn">Show Val</button>
 
</body>
</html>

Output :

Set Content - text(), html(), and val()

<!DOCTYPE html>
<html>
<head>
<title>Set Content - text(), html(), and val()</title>
 
<script src="../js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("#btn1").click(function(){
        $("#test1").text("Hello world!");
    });
    $("#btn2").click(function(){
        $("#test2").html("<b>Hello world!</b>");
    });
    $("#btn3").click(function(){
        $("#test3").val("Free Time Learning");
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>
<body>
 
<p id="test1">This is a sample paragraph.</p>
<p id="test2">This is another sample paragraph.</p>
 
<p>Input field: <input type="text" id="test3" value="website Name"></p>
 
<button id="btn1" class="btn">Set Text</button>
<button id="btn2" class="btn">Set HTML</button>
<button id="btn3" class="btn">Set Value</button>
 
</body>
</html>

Output :

jQuery Get & Set Attributes - attr() Methods

You can use the jQuery attr() method to either get the value of an element's attribute or set one or more attributes for the selected element.

Get Attributes - attr() Method

The following example will show you how get the href attribute of the hyperlink i.e. the <a> element as well as the alt attribute of an <img> element :

<!DOCTYPE html>
<html>
<head>
<title>Get Attributes - attr() Method</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $(".btn-one").click(function(){
        var str = $("a").attr("href");
        alert(str);
    });
    $(".btn-two").click(function(){
        var str = $("img#ftl").attr("alt");
        alert(str);
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>
<body>
    <button type="button" class="btn-one btn">Get link href Attribute</button>
    <button type="button" class="btn-two btn">Get image alt Attribute</button>
    <p><a href="http://www.freetimelearning.com/"><img id="ftl" src="images/Free-Time-Learning.png" alt="Logo"></a></p>
</body>
</html>

Output :

Set Attributes - attr() Method

The jQuery attr() method is also used to set/change attribute values.

The following jQuery attr() example demonstrates how to change (set) the value of the href attribute of an <img> element :

<!DOCTYPE html>
<html>
<head>
<title>Set Attributes - attr() Method</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("img").attr({
            "class" : "frame",
            "title" : "Free Time Learning Logo"
        });
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
.frame{border: 6px solid #000; padding:20px; }
</style>
</head>
<body>
    <button type="button" class="btn">Set Image Attributes</button>
    <p><img id="ftl" src="images/Free-Time-Learning.png" alt="Free Time Learning Logo"></p>
</body>
</html>

Output :

jQuery Tutorial