Como posso criar e estilizar uma div usando JavaScript?

174

Como posso usar JavaScript para criar e estilizar (e anexar à página) uma div, com conteúdo? Eu sei que é possível, mas como?

javascript Felipe Brahm
fonte
Veja também stackoverflow.com/questions/5927012/…
Cees Timmerman 14/11

Respostas:

273 

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>
Expandir snippet

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 a referência pai em vez de document.body.

Igor Dymov
fonte
Eu sei que isso é antigo, mas adicionar uma classe e CSS relacionado seria uma abordagem mais moderna, mas essa é uma pergunta diferente.
Mark Schultheiss
63

Depende de como você está fazendo isso. Javascript puro:

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

Fazer o mesmo usando o jquery é embaraçosamente fácil:

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

Felicidades!

jrharshath
fonte
4
Eu não diria que o jQuery é mais fácil, é mais curto. Mas, em vez de usar setAttribute para a classe, eu usaria div.className = 'myclass';
Daan Wilmer
4
O jQuery é MUITO mais fácil quando você começa a desenvolver interfaces de usuário javascript pesadas. como ele adota o modelo funcional de programação desde o início, ele faz com que seu código pareça e se comporte também. Caso em questão: ajax usando js nativas vs jQuery :)
jrharshath
3
Chamar o jQuery de "funcional" é um grande trecho. Como você define o modelo funcional e de que forma o jQuery o adota?
jquery é ótimo se você tiver 10 linhas no seu aplicativo. Bem-vindo ao inferno, se você criar um aplicativo sério com ele. A brevidade não é automaticamente boa programação /
Hal50000 13/16
a parte jQuery aqui não acrescentar um divmodo não responder à pergunta
Mark Schultheiss
10

Enquanto outras respostas aqui funcionam, notei que você pediu uma div com conteúdo. Então aqui está a minha versão com conteúdo extra. JSFiddle link na parte inferior.

JavaScript (com comentários):

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

Nota: Linhas CSS emprestadas da Ratal Tomal

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

Rani Kheir
fonte
9

esta solução usa a biblioteca jquery

$('#elementId').append("<div class='classname'>content</div>");
faixas
fonte
14
Javascript de aparência engraçada.
TheCarver 17/07/19
5

Aqui está uma solução que eu usaria:

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

Se você deseja que o atributo e / ou valores do atributo sejam baseados em variáveis:

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

Em seguida, anexar ao corpo:

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

Fácil como torta.

Peter
fonte
O que devo escrever na página html?
Md. Nahiduzzaman Rose
1
Precisamos especificar [0]ao usar getElementsByTagName(). (Curta demais para um edit)
HKJeffer
2

Você pode criar assim

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

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

Snippet executável completo: 

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>
Expandir snippet

Mahesh K
fonte
2

criar div com o nome do ID

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

adicionar texto a div

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

código de teste

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

resultado

this is paragraph 1
wly185
fonte
1

Outra coisa que gosto de fazer é criar um objeto e, em seguida, percorrer o objeto e definir os estilos assim, pois pode ser entediante escrever todos os estilos, um por um.

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