# Manipulating Elements *— So we've created an element, what do we do with it now?*\ \&#xNAN;*— 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

``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://antonshevchuk.gitbook.io/jquery-for-beginners/50_document_manipulation/manipulation.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.