222

How can I use JavaScript to create and style (and append to the page) a div, with content? I know it's possible, but how?

Improve this question
1

11 Answers 11

Reset to default
338 

var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "white";
div.innerHTML = "Hello";

document.getElementById("main").appendChild(div);
<body>
<div id="main"></div>
</body>

var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "white";
div.innerHTML = "Hello";

document.getElementById("main").appendChild(div);
OR
document.body.appendChild(div);

Use parent reference instead of document.body.

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

2 Comments

I know this is old but adding a class and related CSS would be a more modern approach, but that is a different question.
In my case, setting the element dimensions wasn't working because I forgot to append the unit to my numeric values. With const width = 100, I had to write el.style.width = `${width}px` instead of just el.style.width = width.
76

Depends on how you're doing it. Pure javascript:

var div = document.createElement('div');
div.innerHTML = "my <b>new</b> skill - <large>DOM maniuplation!</large>";
// set style
div.style.color = 'red';
// better to use CSS though - just set class
div.setAttribute('class', 'myclass'); // and make sure myclass has some styles in css
document.body.appendChild(div);

Doing the same using jquery is embarrassingly easy:

$('body')
.append('my DOM manupulation skills dont seem like a big deal when using jquery')
.css('color', 'red').addClass('myclass');

Cheers!

Improve this answer

5 Comments

I wouldn't say jQuery is easier, it's mostly just shorter. But, instead of using setAttribute for the class, I would use div.className = 'myclass';
jQuery is a LOT easier once you start developing heavy javascript UIs. given that it embraces the functional model of programming from the get go, it makes your code look and behave functional as well. Case in point: ajax using native js vs jquery :)
Calling jQuery "functional" is a major stretch. How do you define the functional model, and in what way do you think jQuery embraces it?
jquery is great if you have 10 lines in your application. Welcome to hell if you build a serious application with it. Brevity isnt automatically good programming/
the jQuery portion here does not append a div so does not answer the question
14

While other answers here work, I notice you asked for a div with content. So here's my version with extra content. JSFiddle link at the bottom.

JavaScript (with comments):

// Creating a div element
var divElement = document.createElement("Div");
divElement.id = "divID";

// Styling it
divElement.style.textAlign = "center";
divElement.style.fontWeight = "bold";
divElement.style.fontSize = "smaller";
divElement.style.paddingTop = "15px";

// Adding a paragraph to it
var paragraph = document.createElement("P");
var text = document.createTextNode("Another paragraph, yay! This one will be styled different from the rest since we styled the DIV we specifically created.");
paragraph.appendChild(text);
divElement.appendChild(paragraph);

// Adding a button, cause why not!
var button = document.createElement("Button");
var textForButton = document.createTextNode("Release the alert");
button.appendChild(textForButton);
button.addEventListener("click", function(){
    alert("Hi!");
});
divElement.appendChild(button);

// Appending the div element to body
document.getElementsByTagName("body")[0].appendChild(divElement);

HTML:

<body>
  <h1>Title</h1>
  <p>This is a paragraph. Well, kind of.</p>
</body>

CSS:

h1 { color: #333333; font-family: 'Bitter', serif; font-size: 50px; font-weight: normal; line-height: 54px; margin: 0 0 54px; }

p { color: #333333; font-family: Georgia, serif; font-size: 18px; line-height: 28px; margin: 0 0 28px; }

Note: CSS lines borrowed from Ratal Tomal

JSFiddle: https://jsfiddle.net/Rani_Kheir/erL7aowz/

Improve this answer

Comments

10

this solution uses the jquery library

$('#elementId').append("<div class='classname'>content</div>");
Improve this answer

1 Comment

Funny looking Javascript.
7

This will be inside a function or script tag with custom CSS with classname as Custom

 var board = document.createElement('div');
 board.className = "Custom";
 board.innerHTML = "your data";
 console.log(count);
 document.getElementById('notification').appendChild(board);
Improve this answer

Comments

7

Another thing I like to do is creating an object and then looping thru the object and setting the styles like that because it can be tedious writing every single style one by one.

var bookStyles = {
   color: "red",
   backgroundColor: "blue",
   height: "300px",
   width: "200px"
};

let div = document.createElement("div");

for (let style in bookStyles) {
 div.style[style] = bookStyles[style];
}

document.body.appendChild(div);
Improve this answer

Comments

5

Here's one solution that I'd use:

var div = '<div id="yourId" class="yourClass" yourAttribute="yourAttributeValue">blah</div>';

If you wanted the attribute and/or attribute values to be based on variables:

var id = "hello";
var classAttr = "class";
var div = '<div id='+id+' '+classAttr+'="world" >Blah</div>';

Then, to append to the body:

document.getElementsByTagName("body").innerHTML = div;

Easy as pie.

Improve this answer

2 Comments

What should i write on html page?
We need to specify [0] when using getElementsByTagName(). (Too short for a edit)
4

create div with id name

var divCreator=function (id){
newElement=document.createElement("div");
newNode=document.body.appendChild(newElement);
newNode.setAttribute("id",id);
}

add text to div

var textAdder = function(id, text) {
target = document.getElementById(id)
target.appendChild(document.createTextNode(text));
}

test code

divCreator("div1");
textAdder("div1", "this is paragraph 1");

output

this is paragraph 1
Improve this answer

Comments

3

You can create like this

board.style.cssText = "position:fixed;height:100px;width:100px;background:#ddd;"

document.getElementById("main").appendChild(board);

Complete Runnable Snippet: 

var board;
board= document.createElement("div");
board.id = "mainBoard";
board.style.cssText = "position:fixed;height:100px;width:100px;background:#ddd;"
    
document.getElementById("main").appendChild(board);
<body>
<div id="main"></div>
</body>

Improve this answer

Comments

2

Here's a small example that uses some nifty reusable DOM utility functions:

// DOM utility functions:

const
  elNew = (tag, prop) => Object.assign(document.createElement(tag), prop),
  els   = (sel, par) => (par ?? document).querySelectorAll(sel),
  el    = (sel, par) => (par ?? document).querySelector(sel);

// Task:

const elItem = elNew("div", {
  className: "item",
  textContent: "Hello, World!",
  onclick() {
    console.log(this.textContent);
  },
  style: `
    font-size: 2em;
    color: brown;
    background: gold;
  `
});

// Append it
el("body").append(elItem);

Additionally, you can also add styles to your element using Object.assign() like:

// Utility functions
const css = (el, styles) => Object.assign(el.style, styles);

// Example:
css(elItem, { color: "blue", padding: "1rem" });
Improve this answer

Comments

1

Incase anyone was wondering, this can also be achieved in a one liner:

document.body.appendChild(Object.assign(document.createElement("div"), { "style": "background-color:red;color:white", "className": "myClass", "innerText": "Helloo" }))

Jsfiddle

Improve this answer

1 Comment

Exactly what I want looking for!