一、非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.順序不同可能會影響最后的添加成敗！