jQuery GET or SET - HTML Contents and Attributes

jQuery includes a number of useful methods for altering and manipulating HTML elements and attributes.

You can also search for these topics, jQuery - Get html Content and html Attributes, jquery get content values, how to set content and attributes at once in jquery, jquery set content and attributes span and div element, by class, multiple elements to set content and attribute using jquery.

jQuery DOM Manipulation

The ability to alter the DOM is a crucial feature of jQuery.

A number of DOM-related functions are included in jQuery, making it simple to access and edit html elements and attributes.

DOM = Document Object Model

The DOM establishes a standard for interacting with HTML and XML documents :

The W3C Document Object Model (DOM) is a platform and language-independent interface that enables programmes and scripts to dynamically access and alter a document's content, structure, and style.

You can also search for these topics, manipulate the jquery dom methods, example for jquery dom manipulation, define a cheat sheet for jquery dom manipulation, how to execute fast and slow in jquery dom manipulation, handle the datatable dom manipulation, how to manipulate css in jquery dom.

Set or Get HTML Content - text(), html(), and val() Methods

Three basic yet important DOM manipulation jQuery techniques are:

text() - The text content of selected components is set or returned.
html() - Sets or returns the content of the elements that have been specified (including HTML markup).
val() - The value of form input fields is set or returned.

Example:-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#b1").click(function () {
            alert("Text: \n\n" + $("#p1").text());
        });
        $("#b2").click(function () {
            alert("HTML: \n\n" + $("#p1").html());
        });

        $("#b3").click(function () {
            $("#p2").text("The <b>text()</b> method will <b>ignore html output</b> and <i>print</i> the tags as it is.");
        });
        $("#b4").click(function () {
            $("#p2").html("The <b>html()</b> method will <b>display the content</b> in <u>HTML</u> format.");
        });

        $("#b5").click(function () {
            alert("Value: \n\n" + $("#name1").val());
        });

        $("#b6").click(function () {
            $("#name1").val("xyz");
        });
    });
</script>
</head>
<body>

<p id="p1">This is some <b>bold</b> text and <u>underline</u> in a paragraph.</p>

<button id="b1">Show Text</button>
<button id="b2">Show HTML</button>

<br /><br />

<p id="p2">Click the below button to see result.</p>

<button id="b3">Change Text</button>
<button id="b4">Change HTML</button>

<br /><br />

Enter Name: <br /><br />
<input type="text" id="name1" value="abc" style="width:auto" /><br />

<button id="b5">Get Value</button>
<button id="b6">Set Value</button>

</body>
</html>

Output :-

This is some bold text and underline in a paragraph.

Click the below button to see result.

Enter Name:

You can also search for these topics, get content text, html and val in jquery, what is the difference between the get content text, html and val in jquery, example for Get Content text(), html() and val(), explain set content text(), html(), and val() with example, span the jquery to set content text html and val, difference between the set and get, html and val in jquery, input the number of set content text() html() and val() in jquery.

Set or Get Attributes - attr() Method

The attr() function of jQuery is used to set or get attribute value of selected element.

Use the following syntax to assign single attribute:

css("attributename","value");

Use the following syntax to assign multiple attributes at once:

css({"attributename1":"value1","attributename2":"value2",...});

Example :-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#btn1").click(function () {
            alert($("#A1").attr("href"));
        });

        $("#btn2").click(function () {
            $("#A1").attr("href", "https://www.wikipedia.org");
            alert("The HREF values has been changed!");
        });
    });
</script>
</head>
<body>

<p><a id="A1" href="https://www.simmanchith.com" target="_blank">simmanchith.com</a></p>

<button id="btn1">Show HREF Value</button><br /><br />
<button id="btn2">Change HREF Value</button>

</body>
</html>

Output :-

simmanchith.com

Tip:- Mouse over the link (or click on it) to see that the value of the href attribute has changed.

You can also search for these topics, how to get attribute value in jquery example, get attribute attr in jquery selector, jquery class to get attributes attr, list the get attribute, ways to get all attributes, specific value, how to remove the get attribute, jquery set attribute attr all elements, attr src img to set, fix the variable and value, remove the set attribute, how to set multiple attributes, set attribute attr elements and property using jquery, how to use hidden attributes.

A Callback Function for attr() Method

A callback function is included with the jQuery method attr(). The current element's index in the list of chosen items, as well as the original (old) attribute value, are both sent to the callback function. Then, from the function, you return the string you want to use for the new attribute value.

You can also search for these topics, jquery a callback functions for attr multiple example, html tag for callback function for attr in jquery, load and event, return the attr() method using callback function.