Bagaimana saya bisa membuat dan gaya div menggunakan JavaScript?

174

Bagaimana saya bisa menggunakan JavaScript untuk membuat dan gaya (dan menambahkan ke halaman) div, dengan konten? Saya tahu itu mungkin, tetapi bagaimana caranya?

javascript Felipe Brahm
sumber
Lihat juga stackoverflow.com/questions/5927012/...
Cees Timmerman

Jawaban:

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>
Luaskan cuplikan

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

Gunakan referensi orang tua sebagai ganti document.body.

Igor Dymov
sumber
Saya tahu ini sudah lama tetapi menambahkan kelas dan CSS terkait akan menjadi pendekatan yang lebih modern, tetapi itu adalah pertanyaan yang berbeda.
Mark Schultheiss
63

Tergantung bagaimana Anda melakukannya. Javascript murni:

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

Melakukan hal yang sama dengan menggunakan jquery adalah hal yang memalukan:

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

Bersulang!

jrharshath
sumber
4
Saya tidak akan mengatakan jQuery lebih mudah, kebanyakan hanya lebih pendek. Tapi, daripada menggunakan setAttribute untuk kelas, saya akan menggunakan div.className = 'myclass';
Daan Wilmer
4
jQuery adalah BANYAK lebih mudah setelah Anda mulai mengembangkan UI javascript yang berat. mengingat bahwa itu mencakup model fungsional pemrograman sejak awal, itu membuat kode Anda terlihat dan berperilaku fungsional juga. Contoh kasus: ajax menggunakan js asli vs jquery :)
jrharshath
3
Memanggil jQuery "fungsional" adalah peregangan besar. Bagaimana Anda mendefinisikan model fungsional, dan menurut Anda bagaimana jQuery merangkulnya?
jquery sangat bagus jika Anda memiliki 10 baris dalam aplikasi Anda. Selamat datang di neraka jika Anda membangun aplikasi serius dengannya. Brevity bukan pemrograman yang baik secara otomatis /
Hal50000
porsi jQuery di sini tidak ditambahkan divsehingga tidak menjawab pertanyaan
Mark Schultheiss
10

Sementara jawaban lain di sini berfungsi, saya perhatikan Anda meminta div dengan konten. Jadi inilah versi saya dengan konten tambahan. Tautan JSFiddle di bagian bawah.

JavaScript (dengan komentar):

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

Catatan: Baris CSS yang dipinjam dari Ratal Tomal

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

Rani Kheir
sumber
9

solusi ini menggunakan perpustakaan jquery

$('#elementId').append("<div class='classname'>content</div>");
spanduk
sumber
14
Javascript tampak lucu.
TheCarver
5

Inilah satu solusi yang akan saya gunakan:

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

Jika Anda ingin atribut dan / atau nilai atribut didasarkan pada variabel:

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

Kemudian, untuk ditambahkan ke tubuh:

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

Mudah seperti pai.

Peter
sumber
Apa yang harus saya tulis di halaman html?
Md. Nahiduzzaman Rose
1
Kita perlu menentukan [0]kapan menggunakan getElementsByTagName(). (Terlalu pendek untuk diedit)
HKJeffer
2

Anda bisa buat seperti ini

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

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

Cuplikan Runnable Lengkap: 

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>
Luaskan cuplikan

Mahesh K
sumber
2

buat div dengan nama id

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

tambahkan teks ke div

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

kode uji

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

keluaran

this is paragraph 1
wly185
sumber
1

Hal lain yang ingin saya lakukan adalah membuat objek dan kemudian mengulang melalui objek dan mengatur gaya seperti itu karena bisa membosankan menulis setiap gaya satu per satu.

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
sumber