动态创建HTML内容

最新推荐文章于 2024-07-31 11:05:25 发布

lishichengyan

最新推荐文章于 2024-07-31 11:05:25 发布

阅读量2.6k

点赞数 1

分类专栏： JavaScript HTML

本文链接：https://blog.csdn.net/lishichengyan/article/details/77825443

版权

JavaScript 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

HTML

9 篇文章 0 订阅

订阅专栏

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.οnlοad=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.οnlοad=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前面
	}
}

lishichengyan

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
动态创建HTML内容

1）document.write()用来向HTML中插入东西，例入：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Test document.write("this is inserted.")
复制链接

扫一扫

专栏目录