Làm cách nào để tạo và tạo kiểu div bằng cách sử dụng JavaScript?

115

Làm cách nào để sử dụng JavaScript để tạo và tạo kiểu (và nối 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?Làm cách nào để tạo và tạo kiểu div bằng cách sử dụng JavaScript?

Nguồn

2011-07-27 Anonymous

Xem thêm http://stackoverflow.com/questions/5927012/javascript-createelement-style-problem –

190

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 mẹ thay vì document.body.

Nguồn

2011-07-27 06:41:17

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

$('#elementId').append("<div class='classname'>content</div>");

Nguồn

2011-07-27 06:43:41 banners

Javascript tìm kiếm thú vị. – TheCarver

Phụ thuộc vào cách bạn đang làm việc đó. javascript tinh khiết:

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ự sử dụng jquery là xấu hổ dễ dàng:

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

Cheers!

Nguồn

2011-07-27 06:45:32 jrharshath

Tôi sẽ không nói jQuery dễ dàng hơn, nó hầu như chỉ ngắn hơn. Nhưng, thay vì sử dụng setAttribute cho lớp, tôi sẽ sử dụng div.className = 'myclass'; –

jQuery dễ dàng hơn rất nhiều khi bạn bắt đầu phát triển giao diện người dùng javascript nặng. cho rằng nó bao gồm các mô hình chức năng của chương trình từ nhận được đi, nó làm cho mã của bạn trông và hành xử chức năng là tốt. Trường hợp tại điểm: ajax sử dụng js bản địa vs jquery :) – jrharshath

Gọi jQuery là "chức năng" là một trải dài lớn. Làm thế nào để bạn xác định mô hình chức năng, và theo cách nào bạn nghĩ jQuery nắm lấy nó? –

Dưới đây là một giải pháp mà tôi muốn sử dụng:

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

Nếu bạn muốn các thuộc tính và/hoặc cá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 thêm cho cơ thể :

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

Dễ như bánh.

Nguồn

2015-10-08 00:43:06 Peter

Tôi nên viết gì trên trang html? –

Phần trên cùng là HTML ... – Peter

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 ở dưới cùng.

Javascript(với ý 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 ý: dòng CSS mượn từ Ratal Tomal

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

Nguồn

2016-05-01 07:01:09

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

Hoàn Runnable 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>

Nguồn

2016-10-03 12:31:45

Làm cách nào để tạo và tạo kiểu div bằng cách sử dụng JavaScript?

Trả lời

Các vấn đề liên quan