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);