Wie kann ich ein Div mit JavaScript erstellen und formatieren?

174

Wie kann ich JavaScript verwenden, um ein Div mit Inhalten zu erstellen und zu formatieren (und an die Seite anzuhängen)? Ich weiß, dass es möglich ist, aber wie?

javascript Felipe Brahm
quelle
Siehe auch stackoverflow.com/questions/5927012/…
Cees Timmerman

Antworten:

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>
Erweitern Sie das 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);

Verwenden Sie die übergeordnete Referenz anstelle von document.body.

Igor Dymov
quelle
Ich weiß, dass dies alt ist, aber das Hinzufügen einer Klasse und verwandten CSS wäre ein moderner Ansatz, aber das ist eine andere Frage.
Mark Schultheiss
63

Kommt darauf an, wie du es machst. Reines 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);

Dasselbe mit jquery zu tun ist peinlich einfach:

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

Prost!

jrharshath
quelle
4
Ich würde nicht sagen, dass jQuery einfacher ist, es ist meistens nur kürzer. Aber anstatt setAttribute für die Klasse zu verwenden, würde ich div.className = 'myclass' verwenden;
Daan Wilmer
4
jQuery ist viel einfacher, sobald Sie mit der Entwicklung schwerer Javascript-Benutzeroberflächen beginnen. Da es von Anfang an das Funktionsmodell der Programmierung umfasst, sieht Ihr Code auch funktional aus und verhält sich auch so. Ein typisches Beispiel:
Ajax
3
JQuery als "funktional" zu bezeichnen, ist eine große Herausforderung. Wie definieren Sie das Funktionsmodell und inwiefern umfasst es Ihrer Meinung nach jQuery?
jquery ist großartig, wenn Ihre Anwendung 10 Zeilen enthält. Willkommen in der Hölle, wenn Sie damit eine ernsthafte Anwendung erstellen. Kürze ist nicht automatisch gute Programmierung /
Hal50000
Der jQuery-Teil hier fügt kein an, divbeantwortet also nicht die Frage
Mark Schultheiss
10

Während andere Antworten hier funktionieren, stelle ich fest, dass Sie nach einem Div mit Inhalt gefragt haben. Hier ist meine Version mit zusätzlichen Inhalten. JSFiddle-Link unten.

JavaScript (mit Kommentaren)::

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

Hinweis: Von Ratal Tomal ausgeliehene CSS-Zeilen

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

Rani Kheir
quelle
9

Diese Lösung verwendet die jquery-Bibliothek

$('#elementId').append("<div class='classname'>content</div>");
Banner
quelle
14
Lustig aussehendes Javascript.
TheCarver
5

Hier ist eine Lösung, die ich verwenden würde:

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

Wenn Sie möchten, dass das Attribut und / oder die Attributwerte auf Variablen basieren:

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

Dann, um an den Körper anzuhängen:

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

Einfach wie Torte.

Peter
quelle
Was soll ich auf eine HTML-Seite schreiben?
Md. Nahiduzzaman Rose
1
Wir müssen [0]bei der Verwendung angeben getElementsByTagName(). (Zu kurz für eine Bearbeitung)
HKJeffer
2

Sie können so erstellen

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

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

Komplettes lauffähiges Snippet: 

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>
Erweitern Sie das Snippet

Mahesh K.
quelle
2

Erstellen Sie div mit dem ID-Namen

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

füge Text zu div hinzu

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

Testcode

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

Ausgabe

this is paragraph 1
wly185
quelle
1

Eine andere Sache, die ich gerne mache, ist, ein Objekt zu erstellen und dann das Objekt zu durchlaufen und die Stile so einzustellen, weil es mühsam sein kann, jeden einzelnen Stil einzeln zu schreiben.

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
quelle