Hướng dẫn how do you make a div in javascript? - làm thế nào để bạn tạo một div trong javascript?

Question

Làm thế nào tôi có thể sử dụng JavaScript để tạo và tạo kiểu (và nối vào trang) một div, với nội dung? Tôi biết nó có thể, nhưng làm thế nào?

Nội dung chính Show

Làm cách nào để tạo một div?
Div trong JavaScript là gì?
Yếu tố nào là div?
Chính xác thì Div là gì?

Felipe Brahm

3.1621 Huy hiệu vàng26 Huy hiệu bạc42 Huy hiệu đồng1 gold badge26 silver badges42 bronze badges

hỏi ngày 27 tháng 7 năm 2011 lúc 6:38Jul 27, 2011 at 6:38

1

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

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

Sử dụng tham chiếu cha mẹ thay vì

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

7.

Mahesh k

1.6603 huy hiệu vàng23 Huy hiệu bạc36 Huy hiệu đồng3 gold badges23 silver badges36 bronze badges

Đã trả lời ngày 27 tháng 7 năm 2011 lúc 6:41Jul 27, 2011 at 6:41

Igor Dymovigor DymovIgor Dymov

Huy hiệu vàng 16K449 Huy hiệu bạc55 Huy hiệu đồng4 gold badges49 silver badges55 bronze badges

2

Phụ thuộc vào cách bạn làm điều đó. JavaScript thuần túy:

var div = document.createElement('div');
div.innerHTML = "my new skill - DOM maniuplation!";
// 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);

Làm điều tương tự bằng cách sử dụng jQuery rất dễ xấu hổ:

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

Cheers!

Đã trả lời ngày 27 tháng 7 năm 2011 lúc 6:45Jul 27, 2011 at 6:45

Jrharshathjrharshathjrharshath

25.2K33 Huy hiệu vàng95 Huy hiệu bạc127 Huy hiệu đồng33 gold badges95 silver badges127 bronze badges

5

Trong khi các câu trả lời khác ở đây hoạt động, tôi nhận thấy bạn đã yêu cầu một div có nội dung. Vì vậy, đây là phiên bản của tôi với nội dung bổ sung. Liên kết JSFiddle ở phía dưới.

JavaScript (với nhận xét): (with comments):

// 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:


  Title
  This is a paragraph. Well, kind of.

CSS:

h2 { 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; }

Lưu ý: Các dòng CSS mượn từ Ratal Tomal

JSfiddle: https://jsfiddle.net/rani_kheir/erl7aowz/ https://jsfiddle.net/Rani_Kheir/erL7aowz/

Đã trả lời ngày 1 tháng 5 năm 2016 lúc 7:01May 1, 2016 at 7:01

Rani Kheirrani KheirRani Kheir

99911 Huy hiệu bạc14 Huy hiệu đồng11 silver badges14 bronze badges

Giải pháp này sử dụng thư viện jQuery

$('#elementId').append("content");

Hướng dẫn how do you make a div in javascript? - làm thế nào để bạn tạo một div trong javascript?

Andy

14.3k3 Huy hiệu vàng50 Huy hiệu bạc76 Huy hiệu Đồng3 gold badges50 silver badges76 bronze badges

Đã trả lời ngày 27 tháng 7 năm 2011 lúc 6:43Jul 27, 2011 at 6:43

Biểu ngữbanners

4443 Huy hiệu bạc4 Huy hiệu đồng3 silver badges4 bronze badges

1

Một điều khác tôi muốn làm là tạo ra một đối tượng và sau đó lặp qua đối tượng và thiết lập các kiểu như vậy bởi vì nó có thể viết từng kiểu một.

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

Đã trả lời ngày 18 tháng 8 năm 2018 lúc 18:04Aug 18, 2018 at 18:04

KennethkennethKenneth

Huy hiệu 611 Bạc1 Huy hiệu Đồng1 silver badge1 bronze badge

Đây là một giải pháp mà tôi sẽ sử dụng:

0

Nếu bạn muốn các giá trị thuộc tính và/hoặc thuộc tính dựa trên các biến:

1

Sau đó, để nối vào cơ thể:

2

Dễ như ăn bánh.

Đã trả lời ngày 8 tháng 10 năm 2015 lúc 0:43Oct 8, 2015 at 0:43

PeterpeterPeter

3553 Huy hiệu bạc10 Huy hiệu Đồng3 silver badges10 bronze badges

2

Điều này sẽ ở bên trong một chức năng hoặc thẻ script với CSS tùy chỉnh với ClassName như tùy chỉnh

3

Borchvm

3.2947 Huy hiệu vàng40 Huy hiệu bạc40 Huy hiệu đồng7 gold badges40 silver badges40 bronze badges

Đã trả lời ngày 3 tháng 9 năm 2020 lúc 19:10Sep 3, 2020 at 19:10

Tạo Div với tên ID

4

Thêm văn bản vào div

5

mã kiểm tra

6

đầu ra

7

Đã trả lời ngày 8 tháng 5 năm 2018 lúc 13:14May 8, 2018 at 13:14

wly185wly185wly185

1091 Huy hiệu bạc3 Huy hiệu đồng1 silver badge3 bronze badges

Bạn có thể tạo như thế này

8

Đoạn trích hoàn toàn có thể chạy được:

9

Đã trả lời ngày 3 tháng 10 năm 2016 lúc 12:31Oct 3, 2016 at 12:31

Mahesh Kmahesh kMahesh K

1.6603 huy hiệu vàng23 Huy hiệu bạc36 Huy hiệu đồng3 gold badges23 silver badges36 bronze badges

Đã trả lời ngày 27 tháng 7 năm 2011 lúc 6:41

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

1

Igor Dymovigor Dymov

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

2

Huy hiệu vàng 16K449 Huy hiệu bạc55 Huy hiệu đồngMar 22 at 22:18

Phụ thuộc vào cách bạn làm điều đó. JavaScript thuần túy:Roko C. Buljan

Làm điều tương tự bằng cách sử dụng jQuery rất dễ xấu hổ:37 gold badges294 silver badges299 bronze badges

Đã trả lời ngày 27 tháng 7 năm 2011 lúc 6:45

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

3

Jrharshathjrharshath

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

4

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

5

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

6

25.2K33 Huy hiệu vàng95 Huy hiệu bạc127 Huy hiệu đồngFeb 5, 2021 at 15:42

0

Làm cách nào để tạo một div?

Sử dụng Div trong CSS Art để tạo một hình vuông với thẻ div, trước tiên bạn cần xác định thẻ div trống và đính kèm thuộc tính lớp vào nó trong HTML. Trong CSS, chọn Div với thuộc tính lớp, sau đó đặt chiều cao và chiều rộng bằng nhau cho nó.define an empty div tag and attach a class attribute to it in the HTML. In the CSS, select the div with the class attribute, then set an equal height and width for it.

Div trong JavaScript là gì?

TAG xác định một bộ phận hoặc một phần trong tài liệu HTML.Thẻ được sử dụng làm thùng chứa cho các phần tử HTML - sau đó được tạo kiểu bằng CSS hoặc thao tác với JavaScript.defines a division or a section in an HTML document. The

tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript.

Yếu tố nào là div?

: Yếu tố phân chia nội dung.Phần tử HTML là thùng chứa chung cho nội dung dòng chảy.Nó không có tác dụng đối với nội dung hoặc bố cục cho đến khi được tạo kiểu theo một cách nào đó bằng cách sử dụng CSS (ví dụ: kiểu dáng được áp dụng trực tiếp cho nó hoặc một số loại mô hình bố cục như Flexbox được áp dụng cho phần tử mẹ của nó).the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g. styling is directly applied to it, or some kind of layout model like Flexbox is applied to its parent element).

Chính xác thì Div là gì?

Thông thường nhất, bạn sẽ sử dụng phần tử Div để nhóm mã mà bạn muốn nhắm mục tiêu với CSS.Bạn có thể tạo kiểu cho chúng để trông khác với các phần khác trên trang hoặc để định vị chúng khác nhau.Bạn cũng có thể sử dụng thuộc tính div và ngôn ngữ để thay đổi ngôn ngữ của một phần cụ thể trên trang.group sections of code that you want to target with CSS. You can style them to look different from other sections on the page, or to position them differently. You can also use a div and language attribute to change the language of a particular section on the page.

programming javascript Create element JavaScript Js make div Create element jQuery Div in HTML

Hướng dẫn how do you make a div in javascript? - làm thế nào để bạn tạo một div trong javascript?

Title

Làm cách nào để tạo một div?

Div trong JavaScript là gì?

Yếu tố nào là div?

Chính xác thì Div là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội