WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

jQuery - Set Content and Attributes


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

We will utilize a similar three techniques from the past page to set content:

  • text() - Sets or returns the content substance of chose elements
  • html() - Sets or returns the substance of chose components (counting HTML markup)
  • val() - Sets or returns the estimation of structure fields

The following model shows how to set substance with the jQuery content(), html(), what's more, val() methods:

Example

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("Dolly Duck");
});

A Callback Function for content(), html(), and val()

All of the three jQuery strategies above: content(), html(), what's more, val(), additionally accompany a callback work. The callback work has two parameters: the record of the present component in the rundown of components chose furthermore, the first (old) esteem. You at that point return the string you wish to use as the new incentive from the function.

The following model exhibits content() and html() with a callback function:

Example

$("#btn1").click(function(){
    $("#test1").text(function(i, origText){
        return "Old content: " + origText + " New content: Hello world!
        (record: " + I + ")";
    });
});

$("#btn2").click(function(){
    $("#test2").html(function(i, origText){
        return "Old html: " + origText + " New html: Hello <b>world!</b>
        (record: " + I + ")";
    });
});

Set Attributes - attr()

The jQuery attr() technique is additionally used to set/change characteristic values.

The following model exhibits how to change (set) the estimation of the href property in a link:

Example

$("button").click(function(){
    $("#w3s").attr("href", "http://www.welookups.com/jquery");
});
Try it yourself »

The attr() technique likewise enables you to set numerous qualities at the equivalent time.

The following model shows how to set both the href and title traits at the equivalent time:

Example

$("button").click(function(){
    $("#w3s").attr({
        "href" : "http://www.welookups.com/jquery",
        "title" : "welookups jQuery Tutorial"
    });
});

A Callback Function for attr()

The jQuery technique attr(), additionally accompany a callback work. The callback work has two parameters: the file of the present component in the rundown of components chose furthermore, the first (old) characteristic esteem. You at that point return the string you wish to use as the new characteristic incentive from the function.

The following model shows attr() with a callback function:

Example

$("button").click(function(){
    $("#w3s").attr("href", function(i, origValue){
        return origValue + "/jquery";
    });
});

jQuery HTML Reference

For a total review of all jQuery HTML strategies, it would be ideal if you go to our jQuery HTML/CSS Reference.