Get and set content, attributes, classes and styles.
✍️ 3 exercises + code challenge in this lesson.text(), .html(), .val(): get or set..attr("href") / .attr("href", "new").append(), .prepend(), .after(), .before().remove(), .empty().addClass(), .removeClass(), .toggleClass().css("color") / .css("color", "red")Mastering jQuery HTML & CSS helps you write clean and reliable jQuery code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style> .done { text-decoration: line-through; color: #94A3B8; } </style>
<input id="task" placeholder="New task"> <button id="add">Add</button>
<ul id="list"><li>Learn jQuery</li></ul>
<p><small>Click a task to mark it done.</small></p>
<script>
$("#add").click(function () {
const text = $("#task").val().trim();
if (!text) return;
$("#list").append($("<li>").text(text));
$("#task").val("");
});
$("#list").on("click", "li", function () {
$(this).toggleClass("done");
});
</script>Check what you learned in “jQuery HTML & CSS”.
Read the value of an input.
const name = $("#name").();
Which method inserts content at the end of the selected element?
Append a new <li> with the text "Three" to #list.
Free sign-in required · Google login available
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services