Javascript display inner html for a div with id

Question

Is there any way to display all inner html content inside a div with plain javascript?

<div id="parent">
  <div id="child">
    some-value
  </div>
</div>
<div id="output">

</div>

I am trying to use outerhtml

var parent = document.getElementById("parent");
document.getElementById("output").innerHTML = parent.outerHtml;

i tried parent.innerHTML but no luck.

Kurkula
– Kurkula

2017-11-21 19:35:47 +00:00
Commented Nov 21, 2017 at 19:35 — Kurkula
– Kurkula, Commented Nov 21, 2017 at 19:35
you must use innerText with outerHTML

artem55555p
– artem55555p

2017-11-21 19:47:18 +00:00
Commented Nov 21, 2017 at 19:47 — artem55555p
– artem55555p, Commented Nov 21, 2017 at 19:47

lumio · Accepted Answer · 2017-11-21 19:38:58Z

2

You misspelled outerHTML (HTML in all capital). But to show HTML tags as well, use innerText instead

var parent = document.getElementById("parent");
document.getElementById("output").innerText = parent.outerHTML;

<div id="parent">
  <div id="child">
    some-value
  </div>
</div>
<pre id="output"></pre>

edited Nov 21, 2017 at 19:38

answered Nov 21, 2017 at 19:37

lumio

7,6054 gold badges42 silver badges60 bronze badges

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

5 Comments

Kurkula Over a year ago

I am trying to pull html tags also.

lumio Over a year ago

Ah, ok... then just swap innerHTML with innerText

lumio Over a year ago

Also: to keep whitespace, either use <pre> or the CSS property white-space

Kurkula Over a year ago

Can we do a console.log the html content instead of appending to output element?

lumio Over a year ago

Sure. Just remove the second line and use console.log instead

Shreevardhan · Accepted Answer · 2017-11-21 19:37:53Z

2

Use innerText with outerHTML

var parent = document.getElementById("parent");
document.getElementById("output").innerText = parent.outerHTML;

#output {
  white-space: pre;
}

<div id="parent">
  <div id="child">
    some-value
  </div>
</div>
<div id="output"></div>

answered Nov 21, 2017 at 19:37

Shreevardhan

12.7k3 gold badges39 silver badges53 bronze badges

1 Comment

Kurkula Over a year ago

Can we do a console.log the html content instead of appending to output element?

Melchia · Accepted Answer · 2017-11-21 19:46:21Z

1

If you want to create everything from Javascript only. Look at this example.

var div = document.createElement("div");
var nodeDiv = document.createTextNode("Pay attention! This is new.");
div.appendChild(nodeDiv);
var element = document.getElementById("parent");
element.appendChild(div);

<div id="parent">
  <div id="child">
    some-value
  </div>
</div>

answered Nov 21, 2017 at 19:46

Melchia

24.5k23 gold badges110 silver badges130 bronze badges

Collectives™ on Stack Overflow

Javascript display inner html for a div with id

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related