创建id为name的div

var divCreator=function (id){
newElement=document.createElement("div");
newNode=document.body.appendChild(newElement);
newNode.setAttribute("id",id);
}

向div添加文本

var textAdder = function(id, text) {
target = document.getElementById(id)
target.appendChild(document.createTextNode(text));
}

测试代码

divCreator("div1");
textAdder("div1", "this is paragraph 1");

输出

this is paragraph 1

下面是一个小例子，它使用了一些漂亮的可重用DOM实用函数:

// DOM utility functions: const ELNew = (tag, prop) => Object.assign(document.createElement(tag), prop), ELS = (sel, par) => (par ?? document).querySelectorAll(sel), EL = (sel, par) => (par ?? document).querySelector(sel); // Task: const EL_new = ELNew("div", { className: "item", textContent: "Hello, World!", onclick() { console.log(this.textContent); }, style: ` font-size: 2em; color: brown; background: gold; ` }); // Append it EL("body").append(EL_new);

此外，你还可以使用Object.assign()对元素进行样式化，如下所示:

// Add additional styles later:
Object.assign(EL_new.style, {
  color: "red",
  background: "yellow",
  fontSize: "3rem",
});

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

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

你可以使用下面的方法:

document.write()

这是非常简单的，在下面的文件我解释

document.write("<div class='div'>Some content inside the div (It is styled!)</div>") .div { background-color: red; padding: 5px; color: #fff; font-family: Arial; cursor: pointer; } .div:hover { background-color: blue; padding: 10px; } .div:hover:before { content: 'Hover! '; } .div:active { background-color: green; padding: 15px; } .div:active:after { content: ' Active! or clicked...'; } <p>Below or above well show the div</p> <p>Try pointing hover it and clicking on it. Those are tha styles aplayed. The text and background color changes.</p>

创建id为name的div

var divCreator=function (id){
newElement=document.createElement("div");
newNode=document.body.appendChild(newElement);
newNode.setAttribute("id",id);
}

向div添加文本

var textAdder = function(id, text) {
target = document.getElementById(id)
target.appendChild(document.createTextNode(text));
}

测试代码

divCreator("div1");
textAdder("div1", "this is paragraph 1");

输出

this is paragraph 1

你可以这样做

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 > 身体< / >