Comment créer et styliser un div en utilisant JavaScript?

174

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

javascript

— Felipe Brahm
source

Voir aussi stackoverflow.com/questions/5927012/…

— Cees Timmerman

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>

Développer l'extrait

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 la référence parent au lieu de document.body.

— Igor Dymov
source

Je sais que c'est vieux, mais l'ajout d'une classe et du CSS associé serait une approche plus moderne, mais c'est une question différente.

— Mark Schultheiss

63

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 avec jquery est d'une simplicité embarrassante:

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

À votre santé!

— jrharshath
source

4

Je ne dirais pas que jQuery est plus facile, il est généralement plus court. Mais, au lieu d'utiliser setAttribute pour la classe, j'utiliserais div.className = 'myclass';

— Daan Wilmer

4

jQuery est BEAUCOUP plus facile une fois que vous commencez à développer des interfaces utilisateur javascript lourdes. étant donné qu'il embrasse le modèle fonctionnel de programmation dès le départ, il donne à votre code une apparence et un comportement fonctionnels.

— Exemple concret

3

Appeler jQuery "fonctionnel" est une étape majeure. Comment définissez-vous le modèle fonctionnel et de quelle manière pensez-vous que jQuery l'adopte?

jquery est génial si vous avez 10 lignes dans votre application. Bienvenue en enfer si vous créez une application sérieuse avec. La concision n'est pas automatiquement une bonne programmation /

— Hal50000

la partie jQuery ici n'ajoute pas de divdonc ne répond pas à la question

— Mark Schultheiss

10

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

JavaScript (avec 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/

— Rani Kheir
source

9

cette solution utilise la bibliothèque jquery

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

— bannières
source

14

Javascript à la recherche drôle.

— TheCarver

5

Voici une solution que j'utiliserais:

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

Si vous souhaitez que les valeurs d'attribut et / ou d'attribut soient basées 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.

— Peter
source

Que dois-je écrire sur la page html?

— Md. Nahiduzzaman Rose

1

Nous devons spécifier [0]lors de l'utilisation getElementsByTagName(). (Trop court pour un montage)

— HKJeffer

2

Vous pouvez créer comme ça

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

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

Extrait exécutable complet:

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>

Développer l'extrait

— Mahesh K
source

2

créer un div avec un nom d'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");

production

this is paragraph 1

— wly185
source

1

Une autre chose que j'aime faire est de créer un objet, puis de faire une boucle à travers l'objet et de définir les styles comme ça, car cela 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);

— Kenneth
source