jQuery Get, Set and Change HTML

jQuery makes it easy to read and change the content, attributes, styles and structure of a page.

Get and Set Content

Method	Gets or sets
`text()`	The plain text inside an element
`html()`	The HTML inside an element (tags included)
`val()`	The value of a form field
`attr(name)`	The value of an attribute, like href or src

Call a method with no value to get, or with a value to set.

Example

html

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
</head>
<body>

<p>Your name: <input id="name" value="Ayesha"></p>
<p id="greet">Hello!</p>
<a id="site" href="https://workownix.com">Our website</a>
<br><br>
<button id="go">Run</button>
<p id="out"></p>

<script>
$(function () {
  $("#go").on("click", function () {
    const name = $("#name").val();                 // get a value
    $("#greet").html("Hello, <b>" + name + "</b>!");  // set HTML
    const link = $("#site").attr("href");          // get an attribute
    $("#out").text("The link goes to " + link);    // set text
  });
});
</script>

</body>
</html>

Try it Yourself »

Output

The link goes to https://workownix.com

Use text() for anything a user typed. html() reads tags, so it could run harmful code that someone typed in.

To set several attributes at once, pass an object: $("img").attr({ alt: "Logo", width: 120 });. For checkboxes, use prop("checked") to read whether one is checked.

Adding New Elements

Method	Adds the new content
`append()`	At the end, inside the element
`prepend()`	At the start, inside the element
`after()`	After the element, outside it
`before()`	Before the element, outside it

Example

html

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<style>
li button { margin-left: 8px; }
</style>
</head>
<body>

<h3>Guest list for the wedding</h3>
<input id="guest" placeholder="Guest name">
<button id="add">Add</button>
<button id="clear">Clear all</button>
<ol id="list"></ol>

<script>
$(function () {
  $("#add").on("click", function () {
    const name = $("#guest").val().trim();
    if (name === "") return;
    const item = $("<li></li>").text(name);
    item.append($("<button>Remove</button>"));
    $("#list").append(item);
    $("#guest").val("");
  });

  $("#list").on("click", "button", function () {
    $(this).parent().remove();
  });

  $("#clear").on("click", function () {
    $("#list").empty();
  });
});
</script>

</body>
</html>

Try it Yourself »

Removing Elements

remove() deletes the element itself, with everything inside it
empty() keeps the element but deletes everything inside it

Changing CSS

css() gets or sets style properties. Pass an object to set many at once:

Example

javascript

let size = $("h1").css("font-size");    // get, e.g. "32px"

$("h1").css({
  color: "#0769ad",
  "font-size": "40px",
  padding: "10px"
});

Working With Classes

Usually it is cleaner to keep styles in CSS and switch classes with jQuery:

Method	What it does
`addClass("x")`	Adds the class
`removeClass("x")`	Removes the class
`toggleClass("x")`	Adds it if missing, removes it if present
`hasClass("x")`	True if the element has the class

Example

html

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<style>
.plan { display: inline-block; border: 2px solid #ccc; padding: 14px; margin: 4px; cursor: pointer; }
.selected { border-color: #0769ad; background: #e8f1fa; }
</style>
</head>
<body>

<div class="plan">Basic</div>
<div class="plan">Standard</div>
<div class="plan">Premium</div>
<p id="choice">Choose a plan.</p>

<script>
$(function () {
  $(".plan").on("click", function () {
    $(".plan").removeClass("selected");
    $(this).addClass("selected");
    $("#choice").text("You chose: " + $(this).text());
  });
});
</script>

</body>
</html>

Try it Yourself »

Size of Elements

width() and height() get or set the size of an element's content, in pixels, as a number:

Example

javascript

let w = $("#banner").width();   // e.g. 600
$("#banner").height(200);

Exercise

Which method adds new content at the end, inside the selected element?

append()after()prepend()before()