您的位置：首页 > Web前端 > HTML

动态创建HTML内容

2017-09-03 20:57 387 查看

1）document.write()

用来向HTML中插入东西，例入：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Test</title>
</head>
<body>
<script type="text/javascript">
document.write("<p>this is inserted.</p>")
</script>
</body>
</html>

是很经典的方法，但是尽量避免在body中插入它（违反了js和html分离的原则，灵活性不高）

2）innerHTML

微软自家的专利，始见于IE4。元素节点的innerHTML是一个字符串而不是DOM树，它没有什么细节可言，但是却大大地方便了内容插入，比如说：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Test</title>
<script type="text/javascript" src="example.js"></script>
</head>
<body>
<div id="testdiv">
</div>
</body>
</html>

这里的<div>标签是空的，在example.js文件中：

window.onload=function(){
var testdiv=document.getElementById("testdiv");
testdiv.innerHTML="<p>I inserted <em>this</em> content.</p>";
}

就把内容插入了<div>标签内。

innerHTML的优点是方便、可分离。缺点是没有标准化，只适用于HTML文档。。。相比之下，DOM提供了更多的精确性和更多功能。

3）DOM提供的方法

①createElement()

用来创建一个新元素，准确的来说是新的“元素节点”

②appendChild()

用来向现在的DOM树中添加新元素（成为一个子节点）

③createTextNode()

创建文本节点

上面三个方法综合应用的一个例子：

window.onload=function(){
var testdiv=document.getElementById("testdiv");//通过getElementById取得Id属性为testdiv的标签（HTML中为div标签）
var para=document.createElement("p");//创建元素节点p
testdiv.appendChild(para);//p成为div的儿子
var txt=document.createTextNode("Hello World");//创建文本节点
para.appendChild(txt);//文本节点成为p的儿子
}

④insertBefore(para1，para2)

插入节点，往para前插入，如parent.insertBefore(new_element,target)，new_element和target具有相同的父亲，new_element在target之前，二者是兄弟关系。

注：DOM没有提供insertAfter()方法，但是我们可以自己编写

⑤insertAfter(para1，para2)

可以这样实现：

function insertAfter(newElement,targetElement){
var parent=targetElement.parentNode;//取得父节点
if(parent.lastChild==targetElement){
parent.appendChild(newElement);//如果只有一个孩子，直接调用appendChild即可
}
else{
parent.insertBefore(newElement,targetElement.nextSibling);//否则插在目标节点的nextSibling前面
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航