How to add content to html body using JS?

Question

I have many <section> in my html <body> and want to add more through javascript. However, using innerHTML is just replacing my existing sections with new ones, instead of adding them to the old ones.

What else can I use?

If you provide your code so far, you'll get a more specific answer. — gotohales
– gotohales, Commented Nov 21, 2012 at 14:06

Amberlamps · Accepted Answer · 2012-11-21 14:11:37Z

68

You can use

document.getElementById("parentID").appendChild(/*..your content created using DOM methods..*/)

or

document.getElementById("parentID").innerHTML+= "new content"

edited Nov 21, 2012 at 14:11

Amberlamps

40.7k6 gold badges46 silver badges54 bronze badges

answered Nov 21, 2012 at 14:07

Sajjan Sarkar

4,2576 gold badges42 silver badges54 bronze badges

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

3 Comments

Paul S. Over a year ago

I'd always go for DOM methods where possible; .createElement, .appendChild, .insertBefore, .replaceChild, etc.

Joe Over a year ago

I know this is an old answer, but += on innerHTML is a not a good way of appending content to an element. I did the += on an element that had ads loaded already and the ads actually just went blank after appending content. Switching to appendChild(element) vs += "content" fixed the ad disappearing issue. Just an FYI for future users who landed on this page from Google :)

Lukas Liesis Over a year ago

2nd brakes modern JS apps and many other things, especially ones working with "virtual" DOM aka ReactJs and similar. Use appendChild always. 2nd option will take current value, append your new string, and replace the current value, which terminates connection between virtual dom state and dom rendered on screen. stuff will brake. use use 1st. appendChild or other DOM api.

speksy · Accepted Answer · 2018-07-22 19:33:39Z

34

I Just came across to a similar to this question solution with included some performance statistics.

It seems that example below is faster:

document.getElementById('container').insertAdjacentHTML('beforeend', '<div id="idChild"> content html </div>');

InnerHTML vs jQuery 1 vs appendChild vs innerAdjecentHTML.

Reference: 1) Performance stats 2) API - insertAdjacentHTML

I hope this will help.

answered Jul 22, 2018 at 19:33

speksy

8209 silver badges13 bronze badges

2 Comments

Francis Niu Over a year ago

Thanks! insertAdjacentHTML method is quite helpful!

Murilo Over a year ago

Also good to mention that it works on most of the browsers including Internet Explorer 4+

Community · Accepted Answer · 2021-05-06 20:30:08Z

28

I think if you want to add content directly to the body, the best way is:

document.body.innerHTML += "bla bla";

To replace it, use:

document.body.innerHTML = "bla bla";

edited May 6, 2021 at 20:30

CommunityBot

11 silver badge

answered Jan 16, 2015 at 10:30

Webbing

3213 silver badges2 bronze badges

5 Comments

Trev14 Over a year ago

To append instead of erase >> document.body.innerHTML += "bla bla";

jbyrd Over a year ago

This answer is misleading, because the first way (document.body.innerHTML = "bla blah";) is not adding content to the body, it's replacing the content in the body. And the user specifically asked for a way to add content to a body that already has existing content. So the answer to the question is what you're showing as technique #2. Technique #1 you could add as a side note with explanation.

Lukas Liesis Over a year ago

this has side effects on JS apps and this approach brakes events and all kind of random things. Do not "add" to innerHTML. Use DOM API e.g. appendChild

Peska Over a year ago

This answer is breaking so many things as @LukasLiesis has pointed. No idea why so many upvotes...

Lukas Liesis Over a year ago

@Peska it has upvotes because it provides feel of working. You can run this code and it will do the thing. If app would have nothing more, it would be perfectly fine but usually apps have a bit more than such line, then stuff will break and it will be terrible day finding out why completely "unrelated" thing breaks your code. It's like AI generated code, often works w/o any clue of how wrong it is.

kenorb · Accepted Answer · 2017-08-03 11:28:41Z

14

Try the following syntax:

document.body.innerHTML += "<p>My new content</p>";

answered Aug 3, 2017 at 11:28

kenorb

169k95 gold badges712 silver badges796 bronze badges

4 Comments

cssyphus Over a year ago

For those coming to this question via Google etc: This answers the question in the title. +1

cssyphus Over a year ago

Readers should also check out the excellent shortcut in the answer by Ulysse BN, below.

Volomike Over a year ago

This does a replace + append, not just an append. On a long page, this could be very slow and one might see a page flash.

Lukas Liesis Over a year ago

this brakes modern JS apps. use dom API appendChild or similar

JakeParis · Accepted Answer · 2017-08-03 15:14:27Z

6

You're probably using

document.getElementById('element').innerHTML = "New content"

Try this instead:

document.getElementById('element').innerHTML += "New content"

Or, preferably, use DOM Manipulation:

document.getElementById('element').appendChild(document.createElement("div"))

Dom manipulation would be preferred compared to using innerHTML, because innerHTML simply dumps a string into the document. The browser will have to reparse the entire document to get it's stucture.

edited Aug 3, 2017 at 15:14

JakeParis

11.2k6 gold badges44 silver badges67 bronze badges

answered Nov 21, 2012 at 14:11

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

7 Comments

Paul S. Over a year ago

Please don't suggest w3schools to people, it is not officially related to w3 and has a lot of misinformation (see w3fools.com )

Cerbrus Over a year ago

@PaulS. If you have a different DOM manipulation tutorial for me, I'll gladly change the link.

Paul S. Over a year ago

I had to search for some and found these; Navigating the DOM, Modifying the DOM. True, they're not "easy reads" yet but it is a wiki in it's alpha stages.

Cerbrus Over a year ago

@PaulS. Thanks, I'll add them in. I've just read through the page you linked... There's some pretty darn stupid mistakes around w3schools o.O

likerRr Over a year ago

@Cerbrus man, there is no innerHtml property. Please, update your answer with the correct syntax - innerHTML.

|

Saravanan Nandhan · Accepted Answer · 2018-10-31 12:00:11Z

3

Working demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
onload = function(){
var divg = document.createElement("div");
divg.appendChild(document.createTextNode("New DIV"));
document.body.appendChild(divg);
};
</script>
</head>
<body>

</body>
</html>

answered Oct 31, 2018 at 12:00

Saravanan Nandhan

61211 silver badges19 bronze badges

Comments

Ulysse BN · Accepted Answer · 2017-08-03 16:23:41Z

2

In most browsers, you can use a javascript variable instead of using document.getElementById. Say your html body content is like this:

<section id="mySection"> Hello </section>

Then you can just refer to mySection as a variable in javascript:

mySection.innerText += ', world'
// same as: document.getElementById('mySection').innerText += ', world'

See this snippet:

mySection.innerText += ', world!'

<section id="mySection"> Hello </section>

edited Aug 3, 2017 at 16:23

answered Aug 3, 2017 at 15:23

Ulysse BN

11.7k7 gold badges64 silver badges95 bronze badges

Comments

Andrew Nic · Accepted Answer · 2021-04-13 20:15:52Z

1

you can also do like this

document.querySelector("#yourid").append('<div>my element<div>');

answered Apr 13, 2021 at 20:15

Andrew Nic

1782 silver badges11 bronze badges

Comments

ians19 · Accepted Answer · 2022-10-13 19:10:14Z

1

document.querySelector('body').appendChild( //your content )

edited Oct 13, 2022 at 19:10

answered Aug 28, 2021 at 5:11

ians19

112 bronze badges

Comments

Akhil Sekharan · Accepted Answer · 2012-11-21 14:07:56Z

0

Just:

    document.getElementById('myDiv').innerHTMl += "New Content";

answered Nov 21, 2012 at 14:07

Akhil Sekharan

12.7k8 gold badges43 silver badges58 bronze badges

2 Comments

Cornea Valentin Over a year ago

hmm that will append then new html code not replace it

Cornea Valentin Over a year ago

so I think the answer it's right but not explain at all

giles · Accepted Answer · 2021-03-21 18:32:08Z

0

recently, I faced the same issue but I wanted to add content just at the beginning of the content of the body. so I found this solution worthy: using insertAdjecentHTML(positions, text) while specifying the position. The position can either 'beforebegin', 'afterbegin', 'beforeend', 'afterend'

const element = document.getElementById('my-id')

element.insertAdjacentHTML(position, text);

answered Mar 21, 2021 at 18:32

giles

1051 silver badge10 bronze badges

Collectives™ on Stack Overflow

How to add content to html body using JS?

11 Answers 11

3 Comments

2 Comments

5 Comments

4 Comments

7 Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

3 Comments

2 Comments

5 Comments

4 Comments

7 Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related