CODEWITHSUNDEEP
javascript
user825286
user825286

Reputation:

How can I create and style a div using JavaScript?

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?

Upvotes: 221

Views: 515093

Answers (12)

Kenneth
Kenneth

Reputation: 61

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

Upvotes: 6

M. R. M.
M. R. M.

Reputation: 645

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

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

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

Upvotes: 2

Tiago Rangel
Tiago Rangel

Reputation: 1327

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>

Upvotes: -2

Sreenivas kamarthi
Sreenivas kamarthi

Reputation: 69

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

Upvotes: 7

wly185
wly185

Reputation: 139

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

Upvotes: 4

Peter
Peter

Reputation: 383

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.

Upvotes: 5

Igor Dymov
Igor Dymov

Reputation: 16460

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.

Upvotes: 335

Mahesh K
Mahesh K

Reputation: 1697

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>

Upvotes: 3

Rani Kheir
Rani Kheir

Reputation: 1079

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/

Upvotes: 14

banners
banners

Reputation: 454

this solution uses the jquery library

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

Upvotes: 10

jrharshath
jrharshath

Reputation: 26583

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!

Upvotes: 75

Related Questions