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.顺序不同可能会影响最后的添加成败！