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

Question

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.

You can use loops. For instance you could put your code inside a for statement. — c0m1t
– c0m1t, Commented Nov 11, 2022 at 15:23

Quentin · Accepted Answer · 2022-11-11 15:21:27Z

2

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.

answered Nov 11, 2022 at 15:21

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SnNeposis · Accepted Answer · 2022-11-11 15:44:13Z

1

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());

answered Nov 11, 2022 at 15:44

SnNeposis

693 bronze badges

Comments

Dave Pritlove · Accepted Answer · 2022-11-11 16:17:30Z

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.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related