How can I make javascript write out stuff into the HTML document multiple times-CodePudding

I am trying to write some stuff into the HTML document multiple times. It's the same lines of code I want to write out. Basically copy itself.


var a = "asd";

let added = document.createElement("div");
let addedP = document.createElement("p")

addedP.innerText = a;
added.append(addedP);
document.body.append(added);
document.body.append(added);

I tried to do this, it wrote out "asd" on my page once, but I wanted it to do it twice.

CodePudding user response：

An element can't appear in more than one place at once.

If you append an element that is already part of the document then it will be moved.

If you want multiple elements then you need to create them with, for example, createElement or cloneNode.

CodePudding user response：

How about a custom function that returns a unique element? This should help with adding them in since they should all be considered unique:

var a = "asd";

let id = 0;

const newDiv = () => {
    const x = document.createElement("div");
    x.id = (id  ).toString(); // sets its id and adds 1 to id simultaneously
    return x;
}

let addedP = document.createElement("p") // same thing can be done for a unique p as for the div

addedP.innerText = a;
let added = addedP
added.append(newDiv()) // Can still append! (since a new element is returned)
document.body.append(added);
document.body.append(newDiv());

CodePudding user response：

duplicate elements using element.cloneNode()

Elaborating on an earlier answer, the created element can be cloned to make a copy using:

element.cloneNode(true)

See: https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

The true parameter value tells the .cloneNode method to deep clone, meaning it should include the subtree (specifying descendent elements and text nodes).

The following snippet clones the div in the question with and without the deep clone parameter set. When the deep clone parameter is not set, the element is empty.

One caveat to be aware of is that if the original element has an id attribute set, it should be re-set to hold a different value for all subsequent clones to avoid having elements with duplicate ids in the page.

var a = "asd";

const added = document.createElement("div");
const addedP = document.createElement("p")

addedP.innerText = a;
added.append(addedP);
// make a copy of added, including subtree;
copyAdded = added.cloneNode(true)
// clone again without the parameter set true;
anotherCopy = added.cloneNode()

document.body.append(added);
document.body.append(copyAdded);
document.body.append(anotherCopy);

div {
  min-height: 20px;
  border: 1px solid black;
  background: yellow;
  margin: 5px;
}

The first div was created in javascript. The second and third <i>cloned</i> from the first. Note the last paragraph lacks content because the <i>deep clone</i> parameter of <b>element.cloneNode()</b> was not set. The second paragraph used <b>element.cloneNode(true)</b> to specify a deep clone where the element and its subtree is duplicated.