Làm cách nào tôi có thể sử dụng JavaScript để tạo và tạo kiểu (và thêm 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?
Câu trả lời:
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);Sử dụng tài liệu tham khảo cha mẹ thay vì document.body.
Phụ thuộc vào cách bạn đang làm điều đó. Javascript thuần túy:
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);Làm 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');Chúc mừng!
divnên không trả lời câu hỏi
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 (có ý kiến):
// 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; }Lưu ý: Các dòng CSS mượn từ Ratal Tomal
Mã thông báo: https://jsfiddle.net/Rani_Kheir/erL7aowz/
Đây là một giải pháp mà tôi sẽ sử dụng:
var div = '<div id="yourId" class="yourClass" yourAttribute="yourAttributeValue">blah</div>';Nếu bạn muốn thuộc tính và / hoặc giá trị thuộc tính được dựa trên các biến:
var id = "hello";
var classAttr = "class";
var div = '<div id='+id+' '+classAttr+'="world" >Blah</div>';Sau đó, để nối vào cơ thể:
document.getElementsByTagName("body").innerHTML = div;Dễ như ăn bánh.
[0]khi sử dụng getElementsByTagName(). (Quá ngắn để chỉnh sửa)
Bạn có thể tạo như thế này
board.style.cssText = "position:fixed;height:100px;width:100px;background:#ddd;"
document.getElementById("main").appendChild(board);Đoạn trích hoàn chỉnh:
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>tạo div với tên id
var divCreator=function (id){
newElement=document.createElement("div");
newNode=document.body.appendChild(newElement);
newNode.setAttribute("id",id);
}thêm văn bản vào div
var textAdder = function(id, text) {
target = document.getElementById(id)
target.appendChild(document.createTextNode(text));
}mã kiểm tra
divCreator("div1");
textAdder("div1", "this is paragraph 1");đầu ra
this is paragraph 1Một điều khác tôi muốn làm là tạo một đối tượng và sau đó lặp qua đối tượng và thiết lập các kiểu như thế bởi vì nó có thể tẻ nhạt khi 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);