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 ?
Réponses
Trop de publicités?
Igor Dymov
Points
8076
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);Utiliser la référence parentale au lieu de document.body .
jrharshath
Points
10422
Ça dépend de la façon dont vous le faites. Du pur 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);Faire la même chose en utilisant jquery est d'une facilité déconcertante :
$('body')
.append('my DOM manupulation skills dont seem like a big deal when using jquery')
.css('color', 'red').addClass('myclass');A la vôtre !
Rani Kheir
Points
619
Bien que d'autres réponses fonctionnent ici, je remarque que vous avez demandé un div avec du contenu. Voici donc ma version avec du contenu supplémentaire. Lien JSFiddle en bas de page.
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; }Note : Les lignes CSS ont été empruntées à Ratal Tomal.
JSFiddle : https://jsfiddle.net/Rani_Kheir/erL7aowz/
banners
Points
320
Kenneth
Points
41
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 cette façon, 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);- Réponses précédentes
- Plus de réponses
