Javascript append html to body

What else can I use?

kenorb

144k76 gold badges655 silver badges710 bronze badges

asked Nov 21, 2012 at 14:05

1

You can use

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

or

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

Amberlamps

37k5 gold badges39 silver badges53 bronze badges

answered Nov 21, 2012 at 14:07

Sajjan SarkarSajjan Sarkar

3,6924 gold badges38 silver badges48 bronze badges

3

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', '
 content html 
');

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

speksyspeksy

6208 silver badges12 bronze badges

2

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";

answered Jan 16, 2015 at 10:30

WebbingWebbing

2632 silver badges2 bronze badges

3

Try the following syntax:

document.body.innerHTML += "
My new content
";

answered Aug 3, 2017 at 11:28

kenorbkenorb

144k76 gold badges655 silver badges710 bronze badges

4

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.

JakeParis

10.9k3 gold badges38 silver badges65 bronze badges

answered Nov 21, 2012 at 14:11

CerbrusCerbrus

67.6k18 gold badges128 silver badges141 bronze badges

7

Working demo:

answered Oct 31, 2018 at 12:00

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

 Hello 

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!'

 Hello 

answered Aug 3, 2017 at 15:23

Ulysse BNUlysse BN

8,9657 gold badges48 silver badges76 bronze badges

0

you can also do like this

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

answered Apr 13, 2021 at 20:15

Andrew NicAndrew Nic

1081 silver badge11 bronze badges

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

answered Aug 28, 2021 at 5:11

Just:

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

answered Nov 21, 2012 at 14:07

Akhil SekharanAkhil Sekharan

12.3k7 gold badges37 silver badges57 bronze badges

2

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

gilesgiles

551 silver badge8 bronze badges

Can you append to innerHTML in JavaScript?

How do you add a body in HTML?

What is append to body?

How do you append items in JavaScript?