2017/04/14

动态创建标记
传统的技术:
document.write方法
innerHTML属性
DOM方法:
createElement方法
创建元素节点

document.createElement(nodeName);

createTextNode方法
创建文本节点

document.createTextNode(text);

appendChild方法
插入到现有的某个节点

parent.appendChild(child);

    var para = document.createElement("p");
    var txt1 = document.createTextNode("This is");
    var emphasis = document.createElement("em");
    var txt2 = document.createTextNode(" my");
    var txt3 = document.createTextNode(" content.");
    var testdiv = document.getElementById("testdiv");
    testdiv.appendChild(para);
    para.appendChild(txt1);
    para.appendChild(emphasis);
    para.appendChild(txt3);
    emphasis.appendChild(txt2);

顺序可以变.

insertBefore()方法

parentElement.insertBefore(newElement,targetElement)

parentElement就是targetElement.parentNode

构建insertAfter()方法

function insertAfter(newElement,targetElement) {
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

初步了解了ajax,Hijax.
getHTTPObject.js

function getHTTPObject() {
    if (typeof XMLHttpRequest == "undefined")
        XMLHttpRequest = function () {
            try {
                return new ActiveXObject("Msxml2.XMLHTTP.6.0");
            } catch (e) {}
            try {
                return new ActiveXObject("Msxml2.XMLHTTP.3.0");
            } catch (e) {}
            try {
                return new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {}
            return false;
        }
        return new XMLHttpRequest();
}

getNewContent.js

function getNewContent() {
    var request = getHTTPObject();
    if (request) {
        //当页面加载完成后,以上代码会发起一个GET请求,请求与ajax.html文件位于同一目录的example.txt文件
        request.open("GET","example.txt",true);
        //事件处理函数,也可以request.onreadystatechange = functionName; 不要加括号;
        request.onreadystatechange = function () {
            if (request.readyState == 4) { 
            //0表示未初始化;1表示正在加载;2表示加载完毕;3表示正在交互;4表示完成
                alert("Response Received");
                var para = document.createElement("p");
                var txt = document.createTextNode(request.responseText);
                para.appendChild(txt);
                document.getElementById('new').appendChild(para);
            }
        };
        //send方法发送请求
        request.send(null);
    } else {
        alert('Sorry,your browser doesn\'t support XMLHttpRequest');
    }
    alert("Function Done");
}
addLoadEvent(getNewContent);