> For the complete documentation index, see [llms.txt](https://ga0-2.gitbook.io/seifxr10anz-content/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ga0-2.gitbook.io/seifxr10anz-content/week-2/day-1-creating-elements-and-arrays/creating-elements.md). # Creating Elements #### Creating New Elements As we saw a preview of last week, before we can manipulate any object in the webpage, we need to select it first. In addition to selecting existing elements, we can also create new ones using `document.createElement('NAME_OF_ELEMENT')`. ```javascript const newHeading = document.createElement('h1') newHeading.textContent = 'New

created by JS' ``` The snippet above creates a new element `newHeading` but it is not yet part of the DOM. You can add it to the end of the page using `document.body.appendChild(newHeading)`. `document.body` is a handy shortcut for the `` tag. You can also do `targetElement.insertAdjacentElement(position, element)` to insert an element at the given position `position` where `position` is any of the following: | `position` string | Where `element` is inserted | | ----------------- | --------------------------------- | | "beforebegin" | before `targetElement` | | "afterbegin" | as first child of `targetElement` | | "beforeend" | as last child of `targetElement` | | "afterend" | after `targetElement` |