How can I create and style a div using JavaScript?

Admin 1
Viewed 443353

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?

javascript
11 Answers

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];
}

body.appendChild(div);
user_102440160

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

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
user_85160000

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>

user_24900020

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 EL_new = 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(EL_new);

Additionally, you can also style your element using Object.assign() like:

// Add additional styles later:
Object.assign(EL_new.style, {
  color: "red",
  background: "yellow",
  fontSize: "3rem",
});
user_3839040

You can just use the method below:

document.write()

It is very simple, in the doc below I explain

document.write("<div class='div'>Some content inside the div (It is styled!)</div>")
.div {
  background-color: red;
  padding: 5px;
  color: #fff;
  font-family: Arial;
  cursor: pointer;
}

.div:hover {
  background-color: blue;
  padding: 10px;
}

.div:hover:before {
  content: 'Hover! ';
}

.div:active {
  background-color: green;
  padding: 15px;
}

.div:active:after {
  content: ' Active! or clicked...';
}
<p>Below or above well show the div</p>
<p>Try pointing hover it and clicking on it. Those are tha styles aplayed. The text and background color changes.</p>

user_142645680
Related