我如何使用JavaScript创建和风格(并追加到页面)一个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
这个解决方案使用jquery库
$('#elementId').append("<div class='classname'>content</div>");
这取决于你怎么做。纯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');
干杯!
我喜欢做的另一件事是创建一个对象,然后循环遍历对象并设置样式,因为逐个编写每个样式会很乏味。
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);
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。