Vanilla JS Alternatives to jQuery DOM
Change Text
jQuery's text() method sets an element's plain-text content and automatically escapes any special characters, while vanilla JavaScript achieves the equivalent result with the native textContent property. Both treat the value strictly as text, never as markup to be parsed.
Example: Change Text
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="text">Old</p>
<script>
$("#text").text("jQuery way");
document.getElementById("text").textContent = "Vanilla way";
</script>
</body>
</html>Change HTML
jQuery's html() method can insert markup into an element, and vanilla JavaScript's innerHTML property does the same job natively. Because both parse the string as real HTML, either one should only be used with content you trust — never directly with untrusted user input, due to the XSS risk this creates.
Example: Change HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box"></div>
<script>
$("#box").html("<b>jQuery</b>");
document.getElementById("box").innerHTML = "<b>Vanilla</b>";
</script>
</body>
</html>Change CSS
jQuery's css() method can read or change an element's inline styles in one call, while vanilla JavaScript typically uses the style property for individual properties or the classList API for toggling entire classes at once.
Example: Change CSS
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="text">Text</p>
<script>
$("#text").css("color", "red");
document.getElementById("text").style.color = "blue";
</script>
</body>
</html>Create and Append Elements
jQuery lets you create a new element and append it to the page with a compact combination of $() and .append(). Vanilla JavaScript achieves the same result with document.createElement() to build the element and appendChild() to insert it, which takes a couple more lines but avoids the extra library.
Example: Create and Append Elements
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="list"></div>
<script>
$("<p>jQuery created</p>").appendTo("#list");
const el = document.createElement("p");
el.textContent = "Vanilla created";
document.getElementById("list").appendChild(el);
</script>
</body>
</html>Small DOM Project
Both approaches are fully capable of building interactive pages — jQuery tends to be more concise for common tasks, while native DOM APIs avoid the overhead of an extra dependency, which matters more on performance-sensitive or dependency-conscious projects.
Example: Small DOM Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Box</div>
<script>
$("#box").text("via jQuery").css("color", "green");
const box = document.getElementById("box");
box.textContent = "via vanilla";
box.style.color = "purple";
</script>
</body>
</html>Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: