How can I get the HTML for an element with JavaScript?

Question

I want to get the exact HTML of the element I want

like if I have this:

<div class="input">
  <input type="number" id="nanometer" autocomplete="off" class="field" placeholder="nm" oninput="exchange()">
</div>

I want to get that exact HTML code in my JavaScript:

var nano = document.getElementById("nano")

and now I expect nano to be:

<input type="number" id="nano" autocomplete="off" class="field" placeholder="nm" oninput="exchange()">

and for my work, I have to make it duplicate itself like this:

<input type="number" id="nano" autocomplete="off" class="field" placeholder="nm" oninput="exchange()">
<input type="number" id="nano" autocomplete="off" class="field" placeholder="nm" oninput="exchange()">

by this code:

document.getElementById(nano).outerHTML += nano

but it wont work

var html = document.getElementById("nano").outerHTML ? isn't it? But remember, id must be unique, if you duplicate the element with same id, you'll have invalid HTML — Calvin Nunes
– Calvin Nunes, Commented Feb 3, 2020 at 18:46
this var html = document.getElementById(nano).outerHTML gets the whole html codes in the <div> bu i want it to get just it self, and i doesnt matter if the id gets copied, because if i make the javascript code o it, i have plans to change the ids in another copies — Rawand
– Rawand, Commented Feb 3, 2020 at 18:48
which div? Please, share with us your current relevant code, take a look at minimal reproducible example — Calvin Nunes
– Calvin Nunes, Commented Feb 3, 2020 at 18:49
@Rawand id values must be unique through the entire document; you cannot re-use ids. — Pointy
– Pointy, Commented Feb 3, 2020 at 18:50
You might ask about what you're actually trying to do rather than this specific operation. See the XY problem. — isherwood
– isherwood, Commented Feb 3, 2020 at 18:52

Peter B · Accepted Answer · 2020-02-03 19:03:05Z

1

Although the question is for making a clone using HTML strings, it is better to not work with HTML strings but with DOM elements instead. Those are the objects that a browser uses internally.

Using DOM elements it is much easier to control the results, esp. if you need to make changes to the new item - such as giving it a new id, which is mandatory because every id on every page should be unique.

Here is an example:

var nano = document.getElementById("nano");
var parent = nano.parentNode;

var clone = nano.cloneNode(true);
clone.id = "newNano";
clone.setAttribute("value", 123);

parent.insertBefore(clone, nano.nextSibling);

<input type="number" id="nano" autocomplete="off" class="field" placeholder="nm" oninput="exchange()">

answered Feb 3, 2020 at 19:03

Peter B

24.7k5 gold badges42 silver badges94 bronze badges

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

Comments

B''H Bi'ezras -- Boruch Hashem · Accepted Answer · 2020-02-03 19:00:49Z

0

First, get the outer HTML. Then, to duplicate it, you have to append the new HTML to the parent node of whatever you're trying to get. Also, you would need to replace the new ID with something unique. So it would be:

    var nano = document.getElementById("nano"),
        outer = nano.outerHTML,
        newOuter = outer.replace(
          'id="',
          'id="' + Date.now()
        ),
        parent = nano.parentNode;
    
    parent.innerHTML += newOuter;
    console.log(parent.innerHTML)

<div>
<input type="number" id="nano" autocomplete="off" class="field" placeholder="nm" oninput="exchange()">
</div>

edited Feb 3, 2020 at 19:00

answered Feb 3, 2020 at 18:54

B''H Bi'ezras -- Boruch Hashem

1

1 Comment

B''H Bi'ezras -- Boruch Hashem Over a year ago

@CalvinNunes OK so just add anotehr line newouterHTML = outer.replace("id=", "id='" + Date.now() + "')

Collectives™ on Stack Overflow

How can I get the HTML for an element with JavaScript?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related