jQuery Set

What are jQuery-Set Content and Attributes?

The methods which are required for set content:

Text(): It is used for setting or returning the text content of the selected elements. 

Html():It is used for setting or returning the content of the selected elements.

Val():It is used for setting or returning the value of the form fields.

Example:
HTML Document (set.html)
<!DOCTYPE html>
<html>
<head>
    <title>CP Tutorials</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("#para1").text("This is the example of jQuery set.");
            });
            $("#btn2").click(function(){
                $("#para2").html("<b>Vist again</b>");
            });
            $("#btn3").click(function(){
                $("#para3").val("www.CPtutorials.com");
            });
        });
    </script>
</head>

<body>
<p id="para1">Click Set Text</p>
<p id="para2">Click Set HTML</p>
<p>URL : <input type="text" id="para3" value="CP Tutorials"></p>
<button id="btn1">Set Text</button>
<button id="btn2">Set HTML</button>
<button id="btn3">Set Value</button>
</body>
</html>

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

The jQuery methods text(), html(), and val() has callback function. The callback function consistsof two parameters which are the index of the current element in the list of elements selected and the original value.

Example:
HTML Document (txt_html.html)
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <title>CP Tutorials</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#btn-txt").click(function () {
                $("#demo1").text(function (i, originalTxt) {
                    return "Old text: " + originalTxt + " New text: This is New Text";
                });
            });

            $("#btn-html").click(function () {
                $("#demo2").html(function (i, originalTxt) {
                    return "Old html: " + originalTxt + " New html: This is new <b><i>HTML</i></b>";
                });
            });

        });
    </script>
</head>
<body>
<h3>Example of Jquery set Call back function text() and html()</h3>

<p id="demo1">This is a <b>Sample</b> Text.</p>

<p id="demo2">This is HTML <b>bold</b> paragraph.</p>
<button id="btn-txt">Show Old and New Text</button>
<br/>
<button id="btn-html">Show Old and New HTML</button>
</body>
</html>

Set Attributes-attr()

The jQueryattr() method is used for the purposeof setting or changing he attribute values. The method also helps in setting the multiple attributes at the exact same time.

Examples:
HTML Document (attr.html)
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <title>CP Tutorials</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            alert("Value of href: " + $("#ft").attr("href"));
            $("button").click(function () {
                $("#ft").attr("href", "http://tutorialscenterpoint.com/jquery-tutorial.html");
                alert("Value of href: " + $("#ft").attr("href"));
            });
        });
    </script>
</head>
<body>
<p><a href="http://tutorialscenterpoint.com" id="ft">CP Tutorials</a></p>
<button type="button">Change href</button>
</body>
</html>

A Callback Function for attr()

The jQuery method attr() has a callback function and contains of two parameters. One is the index of the current elements in the list of elements selected and another one is the original attribute value.

Examples:
HTML Document (attr_call_back.html)
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <title>CP Tutorials</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            alert("Value of href: " + $("#ft").attr("href"));
            $("button").click(function () {
                $("#ft").attr("href", function (i, val) {
                    return val + "/jquery-tutorial.html";
                });
                alert("Value of href: " + $("#ft").attr("href"));
            });
        });
    </script>
</head>
<body>
<p><a href="http://tutorialscenterpoint.com" id="ft">CP Tutorials</a></p>
<button type="button">Change href</button>
</body>
</html>