The Feynman technique says that teaching a subject makes you better at it, which is what I'm trying to do here. You may correct me if you saw mistakes in this post
Editing HTML through jQuery
Up to this point, we have edited its properties, and its CSS styles. Now we're finally learning HTML manipulation with jQuery.
$("#textblock1").text("🍰 ipsum dolor sit amet ice cream."); $("#smol-text").html("<em>A wild Pokemon appears.</em>");
They add contents inside of the targeted element. The difference is that
text() only allows plain text, while
html() allows HTML tags to be rendered (kinda unsafe against XSS).
<div id="food"> <p id="joe">Mama</p> </div> <p id="dessert">Crepe, mousse, parfait, etc.</p> <p id="people">kids 🙌</p> <script> $("#joe").remove(); // remove JOE MAMA $("#dessert").appendTo("#food"); // Move dessert into food $("#people").clone().appendTo("#food"); // Put kids as foods </script>
clone() don't actually duplicate them, it's mostly used with
appendTo() to actually work.
$("p").parent().css("background-color", "black"); $("body").children().css("color", "pink");
parent() refers to its direct parent, and
children() refers to all of its children (Hint: children in plural).
What's amazing is how to refer to specific elements in a class or element type. Here we can use this (kinda unknown to me) CSS selector:
element is a class or element type, and
n is a number (which is one-indexed, so gonna remember that 😉).
$("body:nth-child(3)").text("I'm number 3 lol");
Or if you feel fancy, use
$(".list:odd").css("background-color", "red"); $(".list:even").css("background-color", "blue");
This count is zero-indexed, which must be remembered.
Yay, I got a lot done today 🥳. A productive day indeed. We're gonna do SASS next, which is short, and I'm already using it. Gonna plow through it (and maybe even add a bit of React tomorrow! 👀)
Top comments (0)