如何使用JavaScript创建和样式一个div ?

我如何使用JavaScript创建和风格(并追加到页面)一个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; }

注意:CSS线条借用Ratal Tomal

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

2016-05-01 07:01:09

其他回答

var div = document.createElement("div"); Div.style.width = "100px"; Div.style.height = "100px"; Div.style.background = "red"; Div.style.color = "白色"; div.innerHTML = "Hello"; . getelementbyid(“主要”).appendChild (div); 身体< > < div id = "主" > < / 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);

使用父引用而不是document.body。

2011-07-27 06:41:17

你可以这样做

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

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

完整的可运行代码片段: var董事会; 董事会= document.createElement (" div "); 董事会。id = "主板"; board.style.cssText = "位置:固定;高度:100px;宽度:100px;背景:#ddd;" . getelementbyid(“主要”).appendChild(板); 身体< > < div id = "主" > < / div > 身体< / >

2016-10-03 12:31:45

这将在一个自定义CSS的函数或脚本标记中，类名为custom

 var board = document.createElement('div');
 board.className = "Custom";
 board.innerHTML = "your data";
 console.log(count);
 document.getElementById('notification').appendChild(board);

2020-09-03 19:10:25

这里有一个我会使用的解决方案:

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

如果你想让属性和/或属性值基于变量:

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

然后，附加到正文:

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

容易得很。

2015-10-08 00:43:06

我喜欢做的另一件事是创建一个对象，然后循环遍历对象并设置样式，因为逐个编写每个样式会很乏味。

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

2018-08-18 18:04:21

如何使用JavaScript创建和样式一个div ?

推荐文章

最新文章

标签