I am trying to insert a button node in a document but for some reasons, it's not getting inserted at both places.

the code is below:

var elements = document.querySelectorAll('.Tabelle-Titel-nur-oben');
var buttonElement = document.createElement("Button");
var t0 = document.createTextNode("CLICK ME");
buttonElement.appendChild(t0);
for(var i = 0; i< elements.length; i++)
{

      document.body.insertBefore(buttonElement, elements[i]);
}

In my code, there are two elements which get matched for querySelectorAll. But my button is only get inserted at the second element. If I use two different button instances it works. I would like to know why a button instance does not get inserted in two places?

I am trying to insert a button node in a document but for some reasons, it's not getting inserted at both places.

the code is below:

var elements = document.querySelectorAll('.Tabelle-Titel-nur-oben');
var buttonElement = document.createElement("Button");
var t0 = document.createTextNode("CLICK ME");
buttonElement.appendChild(t0);
for(var i = 0; i< elements.length; i++)
{

      document.body.insertBefore(buttonElement, elements[i]);
}

In my code, there are two elements which get matched for querySelectorAll. But my button is only get inserted at the second element. If I use two different button instances it works. I would like to know why a button instance does not get inserted in two places?

• javascript
• html
• dom

• 5 Because the same button instance can only exist once, if you want two buttons, you have to create two buttons. – adeneo Commented Sep 9, 2016 at 13:33
• 1 Basically, it is restriction by the DOM model: DOM is a tree model, which implies that each node might have as many child nodes as required, but can have only one parent. And if you added your node in two different places, that node would have two parents. – Little Santi Commented Sep 9, 2016 at 13:37

3 Answers 3

Since your buttonElement is a reference to the same object, you need to clone it before adding it:

var elements = document.querySelectorAll('.Tabelle-Titel-nur-oben');
var buttonElement = document.createElement("Button");
var t0 = document.createTextNode("CLICK ME");
buttonElement.appendChild(t0);
for(var i = 0; i< elements.length; i++)
{
    var btnClone = buttonElement.clone(true);
    document.body.insertBefore(btnClone, elements[i]);
}

Or create the button within the loop as @Roberrrt just pointed out as I was about to hit submit.

It es down to the structure of the page. An HTML page is represented by the Document Object Model. This is a Tree Structure.

In a tree structure a node can have children. Allowing a node to be in two places at once would change the DOM from a Tree into a Directed Acyclic Graph. If one node was an ancestor of another node that appeared as a child of itself, that would make it a graph with cycles (i.e. loops).

This doesn't match the structure of HTML.

If you want something to appear twice in the document, it has to appear twice in the Document Object Model. Even if two objects appear to be the same object twice, they're really two different but identical objects.

The instance of the buttonElement only exists once, you'll have to recreate it again (or clone the initial one, as @Brian suggested) for it to be placed multiple times. Fortunately, you already loop through your nodelist, so you utilize this to create a new button per instance:

var elements = document.querySelectorAll('.Tabelle-Titel-nur-oben');

for(var i = 0; i< elements.length; i++) {
    var buttonElement = document.createElement("Button");
    var t0 = document.createTextNode("CLICK ME");
    buttonElement.appendChild(t0);
    document.body.insertBefore(buttonElement, elements[i]);
}