Jak mogę stworzyć i stylizować div za pomocą JavaScript?

174

Jak mogę używać JavaScript do tworzenia i stylizowania (i dołączania do strony) div z zawartością? Wiem, że to możliwe, ale jak?

javascript Felipe Brahm
źródło
Zobacz także stackoverflow.com/questions/5927012/…
Cees Timmerman

Odpowiedzi:

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>
Rozwiń fragment

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

Użyj odwołania nadrzędnego zamiast document.body.

Igor Dymov
źródło
Wiem, że to jest stare, ale dodanie klasy i powiązanych CSS byłoby bardziej nowoczesnym podejściem, ale to inna kwestia.
Mark Schultheiss
63

Zależy od tego, jak to robisz. Czysty 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);

Zrobienie tego samego za pomocą jquery jest żenująco łatwe:

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

Twoje zdrowie!

jrharshath
źródło
4
Nie powiedziałbym, że jQuery jest łatwiejsze, jest przeważnie po prostu krótsze. Ale zamiast używać setAttribute dla klasy, użyłbym div.className = 'myclass';
Daan Wilmer
4
jQuery jest DUŻO łatwiejsze, gdy zaczniesz tworzyć ciężkie interfejsy użytkownika javascript. biorąc pod uwagę, że obejmuje on funkcjonalny model programowania od samego początku, sprawia, że ​​kod wygląda i zachowuje się funkcjonalnie.
Przykład: Ajax
3
Nazywanie jQuery „funkcjonalnym” to poważny błąd. Jak definiujesz model funkcjonalny i jak myślisz, w jaki sposób jQuery go obejmuje?
jquery jest świetny, jeśli masz 10 wierszy w swojej aplikacji. Witaj w piekle, jeśli zbudujesz z nim poważną aplikację. Zwięzłość nie jest automatycznie dobrym programowaniem /
Hal50000
część jQuery tutaj nie dodaje a, divwięc nie odpowiada na pytanie
Mark Schultheiss
10

Podczas gdy inne odpowiedzi tutaj działają, zauważyłem, że poprosiłeś o div z zawartością. Oto moja wersja z dodatkową zawartością. Link JSFiddle na dole.

JavaScript (z komentarzami):

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

Uwaga: linie CSS zapożyczone z Ratal Tomal

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

Rani Kheir
źródło
9

to rozwiązanie wykorzystuje bibliotekę jquery

$('#elementId').append("<div class='classname'>content</div>");
banery
źródło
14
Zabawnie wyglądający JavaScript.
TheCarver
5

Oto jedno rozwiązanie, którego bym użył:

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

Jeśli chcesz, aby atrybuty i / lub wartości atrybutów były oparte na zmiennych:

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

Następnie, aby dołączyć do ciała:

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

Proste jak ciasto.

Piotr
źródło
Co mam napisać na stronie html?
Md. Nahiduzzaman Rose
1
Musimy określić, [0]kiedy używamy getElementsByTagName(). (Za krótkie na edycję)
HKJeffer
2

Możesz tworzyć w ten sposób

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

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

Kompletny fragment do uruchomienia: 

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>
Rozwiń fragment

Mahesh K.
źródło
2

utwórz div z nazwą id

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

dodaj tekst do div

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

kod testowy

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

wynik

this is paragraph 1
wly185
źródło
1

Inną rzeczą, którą lubię robić, jest tworzenie obiektu, a następnie przechodzenie przez obiekt w pętli i ustawianie stylów w ten sposób, ponieważ pisanie każdego stylu jeden po drugim może być żmudne.

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
źródło