DOM节点的补充

DOM节点的补充

将string(里面是一些html的语句) =>转化成html

example

txt文件中存在这个数据(/node.js(Study)/JQueryAjax/jsonTxt01.txt)

1
2
<h1>AJAX is not a programming language.</h1>
<h2>It is just a technique for creating better and more interactive web 	applications.</h2>

将用DOM操作使一个div获取这个元素并且加入到此div里面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

window.onload = function() {
    var text = document.getElementById("text");
    document.getElementById('btn').onclick = function () {
        var xmlHttp;
        if (window.XMLHttpRequest)
            xmlHttp = new XMLHttpRequest();
        else
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.status == 200 && xmlHttp.readyState == 4) {
                var htmlStr = xmlHttp.responseText;//获取的是一string
                var node = strToNode(htmlStr);//获取到想要的html元素

                text.innerHTML = "";//清空text的文本节点，或许下面1，2
                //1.var s = text.childNodes[0];
                //2.text.removeChild(s);
                
                text.appendChild(node);//将node节点加入
                
            }
        };
        xmlHttp.open("GET", "/node.js(Study)/JQueryAjax/jsonTxt01.txt", true);
        xmlHttp.send();
    }
};

function strToNode(str){
    var node1 = document.createElement("div");
    node1.innerHTML = str;//将string变成html
    var s1 = node1.getElementsByTagName("h2")[0];//获取想要的节点
    return s1;//返回节点
}

-