JavaScript之向文档中添加元素和内容的方法
一、非DOM方法添加
1、document.write()
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function insertParagrah(txt) {
var str = "<i>";
str += txt;
str += "</i>";
document.write(str);
}
insertParagrah("Hello World!");
</script>
</head>
<body>
</body>
简单的说下:这个方法无法向特定的标签下添加内容,还有就是与MIME类型application/xhtml+xml 不兼容,虽然能实现向文档下添加内容和元素的功能,但是不是很推荐使用；
2.innerHtml属性
这个属性几乎所有的浏览器都支持,但是这个属性并不是W3C DOM的标准的组成部分,最重要的是这个属性Html5都支持。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
window.onload = function () {
var testdiv = document.getElementById("testdiv");
alert(testdiv.innerHTML);
}
</script>
</head>
<body>
<div id="testdiv">
<p>This is<em>my</em>Content.</p>
</div>
</body>
</html>
输出i:<p>This is<em>my</em>Content.</p>; nnerHtml毫无细节可言，如果你想要获得ID=testdiv下的细节只能通过dom的属性和方法；
innHtml就像一把大锤一样粗放,而标准化的DOM就像手术刀一样精细。大锤也会有大锤的用处,当你需要把一大段html加入到文档里时,显然用innerHtml更合适.innerHtml不仅支持读取,还支持写入；
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
window.onload = function () {
var targetdiv = document.getElementById("targetdiv");
targetdiv.innerHTML = "<p>This is<em>my</em>Content.</p>";
}
</script>
</head>
<body>
<div id="targetdiv"></div>
</body>
</html>
二、DOM方法添加内容
1、createElement()
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
window.onload = function () {
var para = document.createElement("p");//创建一个p标签
var info = "nodeName:";
info += para.nodeName;
info += " nodeType:";
info += para.nodeType;
alert(info);
}
</script>
</head>
<body>
</body>
</html>
输出：nodeName:P nodeType:1 注意:根据输出我们可以判断当使用document.createElement()方法创建出<p></p>标签时他就已经存在了,虽然这个p标签还没被添加到文档树中,这种情况称之为"文档碎片";
2、appendChild()
创建完我们需要创建的标签之后,就需要将创建好的标签添加到需要添加的地方,appendChild()方法就是干这个的。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
window.onload = function () {
var para = document.createElement("span");
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(para);
}
</script>
</head>
<body>
<div id="testdiv"></div>
</body>
</html>
运行html文件,
成功添加;
3、createTextNode()
ok，现在我们在我们需要添加标签的地方成功了的添加了标签,接下来就是往标签里面添加文本内容了,createTextNode()就是干这个的;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
window.onload = function () {
var testdiv = document.getElementById("testdiv");
var para = document.createElement("span");
testdiv.appendChild(para);
var em_txt = document.createTextNode("Hello World!");
para.appendChild(em_txt);
}
</script>
</head>
<body>
<div id="testdiv"></div>
</body>
</html>
成功添加； 注意appendChild的顺序,添加的顺序可以有很多种，你可以先把变迁和内容创建好,再向对应的容器append.顺序不同可能会影响最后的添加成败！
