web-dev-qa-db-fra.com

Comment créer et styliser une div en JavaScript?

Comment utiliser JavaScript pour créer et styler (et ajouter à la page) un div, avec du contenu? Je sais que c'est possible, mais comment?

javascript
143
user825286

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

Utilisez une référence parent au lieu de document.body.

235
Igor Dymov

Cela dépend de la façon dont vous le faites. Javascript pur:

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

Faire la même chose en utilisant jquery est embarrassant.

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

À votre santé!

52
jrharshath

cette solution utilise la librairie jquery

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

Tandis que les autres réponses ici fonctionnent, je remarque que vous avez demandé une div avec un contenu. Alors voici ma version avec du contenu supplémentaire. Lien JSFiddle en bas.

JavaScript _ ​​(avec des commentaires) :

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

_ {Remarque: lignes CSS empruntées à Ratal Tomal} _

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

6
Rani Kheir

Voici une solution que j'utiliserais:

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

Si vous souhaitez que l'attribut et/ou les valeurs d'attribut soient basés sur des variables:

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

Ensuite, pour ajouter au corps:

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

C'est de la tarte.

4
Peter

Vous pouvez créer comme ça

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

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

Snippet complet exécutable: 

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>

2
Mahesh K

Une autre chose que j'aime faire est de créer un objet, puis de le parcourir en boucle et de définir les styles de la sorte, car il peut être fastidieux d’écrire chaque style un par un.

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

créer un div avec un identifiant

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

ajouter du texte à div

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

code de test

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

sortie

this is paragraph 1
0
wly185