> For the complete documentation index, see [llms.txt](https://antonshevchuk.gitbook.io/jquery-for-beginners/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://antonshevchuk.gitbook.io/jquery-for-beginners/50_document_manipulation/manipulation.md). # Manipulating Elements *— So we've created an element, what do we do with it now?*\ *— Let's add it to the page — every element deserves its own DOM.* It's time to learn how to add elements to a page. All the methods we need are gathered in one section of the documentation — [Manipulation](https://api.jquery.com/category/manipulation/). We've already met some of them, and there's just a little bit left:
methoddescription
after(content)
inserts content after each element in the selection, i.e. if you see the line $('p').after('<hr/>'), read it as "after each paragraph a line will be added"
insertAfter(element)
inserts elements from the selection after each element passed as an argument, i.e. if you see the line $('<hr/>').insertAfter('p'), read it as "a line will be inserted after each paragraph"
> *— Hmm, I don't see the difference!* > > *— It's easy, look closer:* > > ```javascript > $("found element").after("what to add after it?") > $("what to add").insertAfter("after which element?") > ``` Let's repeat. Take some arbitrary text and add it after each paragraph: ```javascript $('p').after('(^_^)ノ') ``` If we want to add a new DOM element, we can pass an HTML string as the parameter and hope that jQuery figures out what to do with it: ```javascript $('p').after('
') ``` If we want to move a DOM element, we'll need to explicitly "select" it using a jQuery call: ```javascript $('p').after($('h1')) ``` If we don't do that, we'll get a completely different result: ```javascript $('p').after('h1') ``` Good, we've covered the `after()` method — next up is the `before()` method:
methoddescription
before(content)
inserts content before each selected element
insertBefore(element)
inserts elements from the selection before each element passed as an argument
> *— OK, I think I'm starting to get it:* > > ```javascript > $("found element").before("what to add before it?") > $("what to add").insertBefore("before which element?") > ``` {% embed url="" %} *** The following methods take the target elements and modify them:
methoddescription
append(content)
inserts content at the end of each element in the selection, i.e. the line $("p").append("<hr/>") should be read as "a line will be added to the end of each paragraph"
appendTo(element)
inserts the selected content at the end of each element passed as an argument;
$("<hr/>").appendTo("p") — "a line will be added to the end of each paragraph"
> *— Again about the difference:* > > ```javascript > $("found element").append("what to append there?") > $("what to append").appendTo("to which element?") > ```
methoddescription
prepend(content)
inserts content at the beginning of each element in the selection
prependTo(element)
inserts the selected content at the beginning of each element passed as an argument
{% embed url="" %} *** Alright, we've sorted out this chunk of documentation. Again, feel the difference between the listed methods, because there are more coming:
methoddescription
replaceWith(content)
replaces the found elements with a new one:
$("p").replaceWith("<hr/>")
replaceAll(target)
inserts content in place of the found elements:
$("<hr/>").replaceAll("h3")
> *— Ah, right:* > > ```javascript > $("found element").replaceWith("what to replace it with?") > $("what to insert").replaceAll("instead of what?") > ``` {% embed url="" %} ***
methoddescription
wrap(element)
wraps each found element with a new element;

think of it as taking candies from a box and wrapping each one
wrapAll(element)
wraps the found elements with a new element;

we take a bunch of candies and wrap them in one big wrapper
wrapInner(element)
wraps the content of each found element with a new element;

take the candies, unwrap each one, wrap in a new wrapper, then put the original wrapper back on top
unwrap()
removes the parent element of the found elements; wrappers off!
> Sure, I could pretend to be a smarty-pants here, but in reality I'm constantly peeking at method names too when working with the DOM. {% embed url="" %} *** Here's a homework assignment for you — write a script that adds the following HTML to the page: ```markup

Ring

```