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?
111 Answers
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></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.
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!
5While 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
this solution uses the jquery library
$('#elementId').append("<div class='classname'>content</div>"); 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); Here's one solution that I'd use:
var div = '<div 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.
2This 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); 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 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></div> </body>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", }); 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>
