Adding and Moving Content with jQuery
In this video, we’ll take a look at all the different ways of adding content to a page using jQuery, whether we’re just adding some text, or if we’re adding new HTML elements to the page.
We’ll get started with a pretty simple HTML file – just a heading and a few paragraphs of text. To make that go by quickly, we take advantage of the Emmet package for Sublime Text.
Once the HTML document is ready to go, we’ll take a look at adding some text content to the page using a few different jQuery methods:
append()
prepend()
before()
after()
Once we learn how to use those, then we learn how to create new HTML elements with jQuery. Then we take a look at some jQuery methods for adding our newly created HTML elements to the page, using:
appendTo()
prependTo()
insertBefore()
insertAfter()
Next we learn a nicer way to create new HTML elements with jQuery, making the code more readable when we’re adding classes, id’s, text, and other attributes to the newly created elements.
Finally, we learn how to use these same methods to move existing content around the page so that it shows up in new spots. You can entirely re-arrange your HTML page by moving the content around, wherever you’d like.