jQuery Set

Some jQuery methods allow you to assign or read a value from a selection. text(), html(), attr(), and val() are a few examples.

When these methods are called with no arguments, they are referred to as getters since they get (or read) the element's value. When these methods are used with a value as an argument, they are known as setters because they set (or assign) that value.

jQuery text() Method

The jQuery text() function is used to either retrieve or set the combined text contents of the chosen components, including their descendants.

Set Contents with text() Method

The following example demonstrates how to change the wording of a paragraph:

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Set Text of the Elements</h1>
<button class="btnSet">Set Text</button>
<p></p>

<script>
    $(document).ready(function(){
        $(".btnSet").click(function(){
            $("p").text("Welcome to webtutor.dev");
        });
    });
</script>
</body>
</html>

Preview

jQuery html() Method

The html() function of jQuery is used to obtain or set the HTML contents of elements.

Set HTML Contents with html() Method

The following example demonstrates how to modify the HTML content of the <body> element:

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Set HTML of the Element</h1>
<button class="btnSet">Set HTML</button>
<p></p>

<script>
    $(document).ready(function(){
        $(".btnSet").click(function(){
            $("p").html("<p><b>Webtutor</b>.dev</p>");
        });
    });
</script>
</body>
</html>

Preview

jQuery attr() Method

The jQuery attr() function may be used to retrieve the value of an element's attribute or to set one or more attributes for the specified element.

Set Attributes with attr() Method

You may also use the attr() function to set many attributes at once. The example below demonstrates how to set the class and title attributes for the <image> components.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Set Element's Attribute Value</h1>
<img src="" width="250" height="150" alt=""><br><br>
<button class="btnSet">Set Attribute</button>

<script>
    $(document).ready(function(){
        $(".btnSet").click(function(){
            $("img").attr("src", "https://webtutor.dev/images/women.jpg");
        });
    });
</script>
</body>
</html>

Preview

jQuery val() Method

The val() function of jQuery is mostly used to acquire or set the current value of HTML form elements such as <input>, <select>, and <textarea>.

Set the Values of Form Fields with val() Method

The following example demonstrates how to set the values of form controls:

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Set Form Fields Values</h1>
<input type="text" id="name"><br><br>
<button class="btnSet">Set Value</button>

<script>
    $(document).ready(function(){
        $(".btnSet").click(function(){
            $("input").val("Webtutor.dev");
        });
    });
</script>
</body>
</html>

Preview

jQuery Get

jQuery Add

jQuery Set

jQuery text() Method

Set Contents with text() Method

Example

jQuery html() Method

Set HTML Contents with html() Method

Example

jQuery attr() Method

Set Attributes with attr() Method

Example

jQuery val() Method

Set the Values of Form Fields with val() Method

Example

Links

Tutorials

Connect with us