# Creating DOM Elements...and Other Related Stuff!

**URL:** <https://forum.kirupa.com/t/creating-dom-elements-and-other-related-stuff/399251>\
**Category:** programming\
**Created:** [December 2, 2014, 1:09am UTC](https://forum.kirupa.com/t/creating-dom-elements-and-other-related-stuff/399251 "2014-12-02T01:09:49Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 2, 2014, 1:09am UTC](https://forum.kirupa.com/t/creating-dom-elements-and-other-related-stuff/399251/1 "2014-12-02T01:09:52Z")

</div>

by [kirupa](http://www.kirupa.com/me/index.htm) | 28 January 2014

This part may blow you away. For the following sentences, I suggest you hold onto something sturdy:

* * *
This is a companion discussion topic for the original entry at [http://www.kirupa.com/html5/creating\_dom\_elements\_and\_other\_stuff.htm](http://www.kirupa.com/html5/creating_dom_elements_and_other_stuff.htm)

---

<div class="post-metadata">

**Author:** ![chas2win](https://avatars.discourse-cdn.com/v4/letter/c/c67d28/32.png) [@chas2win](https://forum.kirupa.com/u/chas2win)\
**Post date:** [March 2, 2020, 2:50am UTC](https://forum.kirupa.com/t/creating-dom-elements-and-other-related-stuff/399251/2 "2020-03-02T02:50:28Z")

</div>

Handy Dandy Function… example has error. (2nd edition, page 313):  
Below is an example of this function at work:

```auto
let newElement = document.createElement("p");
let bodyElement = document.querySelector("body");
let h1Element = document.querySelector("h1");

newElement.textContent = "I exist entirely in your imagination.";

function insertAfter(target, element) {
  target.parentNode.insertBefore(element, target.nextSibling);
}

insertAfter(bodyElement, newElement);

```

Using bodyElement as the first argument, target.parentNode is html.  
If you want to put the `<p>` after the h1, you need to use h1Element as first argument (ie, target).  
Then it works but…stepping thru the code with Chrome Developer shows that target.nextSibling = text just before the `<p>` element is inserted. Still `<p>` is inserted as desired after h1.  
Comments appreciated.

Charles

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 2, 2020, 5:33am UTC](https://forum.kirupa.com/t/creating-dom-elements-and-other-related-stuff/399251/3 "2020-03-02T05:33:17Z")

</div>

Hey Charles - you are totally right. There is a bug in my example. The problem is with `target.parentNode`. The following code with `parentNode` removed works properly…at least for this example:

```
let newElement = document.createElement("p");
let bodyElement = document.querySelector("body");
let h1Element = document.querySelector("h1");

newElement.textContent = "I exist entirely in your imagination.";

insertAfter(bodyElement, newElement);

function insertAfter(target, element) {
  target.insertBefore(element, target.nextSibling);
}
```

---

<div class="post-metadata">

**Author:** ![ninedeadeyes](https://avatars.discourse-cdn.com/v4/letter/n/b38774/32.png) [@ninedeadeyes](https://forum.kirupa.com/u/ninedeadeyes)\
**Post date:** [March 12, 2022, 10:04pm UTC](https://forum.kirupa.com/t/creating-dom-elements-and-other-related-stuff/399251/4 "2022-03-12T22:04:35Z")

</div>

For the Handy Dandy Function to make sense to the people who are reading it shouldn’t it really be insertAfter(h1Element, newElement); ? Technically there is nothing wrong with you using bodyElement but wouldn’t it be become a ‘sibling’ of bodyElement and throughout the whole example we have been demonstrating how to insert the newElement within the boundaries of the children of the bodyElement. Also it is a bit confusing within the website example above as the original function has the parentnode property and then when you provide an example , the parentnode property is remitted from the same function

```auto
function insertAfter(target, newElement) {
  target.parentNode.insertBefore(newElement, target.nextSibling);
}

```

and then

```auto
function insertAfter(target, element) {
  target.insertBefore(element, target.nextSibling);
}

```

ps: there is a minor clerical error on the clone item code within the website version.

````auto
bodyElement.appenChild(clonedItem);
```.
````

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 15, 2022, 3:53am UTC](https://forum.kirupa.com/t/creating-dom-elements-and-other-related-stuff/399251/5 "2022-03-15T03:53:42Z")

</div>

You are correct on all counts here. Reading what I wrote gives me a headache. Thanks for pointing it out. I will get that section revised shortly. The snippet needs to have `parentNode` called out, so the code in the second part of what I wrote is wrong.

Edit: I revised that section.