CODEWITHSUNDEEP
javascript
apr
apr

Reputation: 607

How to add content to html body using JS?

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?

Upvotes: 59

Views: 216846

Answers (11)

ians19
ians19

Reputation: 11

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

Upvotes: 1

Webbing
Webbing

Reputation: 321

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

Upvotes: 28

Andrew Nic
Andrew Nic

Reputation: 168

you can also do like this

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

Upvotes: 1

giles
giles

Reputation: 105

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

Upvotes: 0

Saravanan Nandhan
Saravanan Nandhan

Reputation: 612

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>

Upvotes: 3

speksy
speksy

Reputation: 810

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.

enter image description here

Reference: 1) Performance stats 2) API - insertAdjacentHTML

I hope this will help.

Upvotes: 34

Ulysse BN
Ulysse BN

Reputation: 11396

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>

Upvotes: 2

Cerbrus
Cerbrus

Reputation: 72857

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.

Upvotes: 6

kenorb
kenorb

Reputation: 166419

Try the following syntax:

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

Upvotes: 14

Sajjan Sarkar
Sajjan Sarkar

Reputation: 4198

You can use

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

or

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

Upvotes: 67

Akhil Sekharan
Akhil Sekharan

Reputation: 12683

Just:

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

Upvotes: 0

Related Questions