我如何使用JavaScript创build和devisediv？
我如何使用JavaScript来创build和样式（和附加到页面）一个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); <body> <div id="main"></div> </body>
取决于你如何做。 纯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);
用jquery做同样的事情是非常容易的：
$('body') .append('my DOM manupulation skills dont seem like a big deal when using jquery') .css('color', 'red').addClass('myclass');
干杯!
这个解决scheme使用jQuery库
$('#elementId').append("<div class='classname'>content</div>");
虽然其他答案在这里工作，我注意到你问内容的div。 所以这里是我的版本与额外的内容。 JSFiddle链接在底部。
JavaScript （附注释） ：
// 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; }
注意：从Ratal Tomal借用CSS线
JSFiddle： https ：//jsfiddle.net/Rani_Kheir/erL7aowz/
这是我将使用的一个解决scheme：
var div = '<div id="yourId" class="yourClass" yourAttribute="yourAttributeValue">blah</div>';
如果您希望属性和/或属性值基于variables：
var id = "hello"; var classAttr = "class"; var div = '<div id='+id+' '+classAttr+'="world" >Blah</div>';
然后，追加到身体：
document.getElementsByTagName("body").innerHTML = div;
易如反掌。
你可以像这样创build
board.style.cssText = "position:fixed;height:100px;width:100px;background:#ddd;" document.getElementById("main").appendChild(board);
完整的可运行代码段：
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>
