Javascript DOM 编程实例讲解--仿LightBox效果提示框（6）

element.appendChild(element)--给节点追加子节点

接着开下面的代码：

var divTitle = document.createElement("div");
    divTitle.setAttribute("id","win-tl");
    
    var H2 = document.createElement("h2");
    
    var IMG=document.createElement("img");
    IMG.setAttribute("src","img/win.png");
    IMG.setAttribute("alt","Window-Icon");
    
    var txtTitle=document.createTextNode("爱唱卡充值");
    
    H2.appendChild(IMG); 
    H2.appendChild(txtTitle);
    
    var closeBar=document.createElement("div");
    closeBar.setAttribute("id","closebar");
    var A = document.createElement("a");
    A.innerHTML="关闭窗口";
    A.setAttribute("href","#1");
    A.setAttribute("id","btnClose");
    A.setAttribute("title","关闭窗口");
    
    closeBar.appendChild(A);
    
    var titleRight=document.createElement("div");
    titleRight.setAttribute("id","win-tr");    
  
    divTitle.appendChild(H2);
    divTitle.appendChild(closeBar);
    divTitle.appendChild(titleRight);
    
    var Container = document.createElement("div");
    Container.setAttribute("id","msg-content");
    
    var cntLeft=document.createElement("div");
    cntLeft.setAttribute("id","msg-leftbar");
    
    var MSG=document.createElement("div");
    MSG.setAttribute("id","msg");
    
    var INFO=document.createElement("div");
    INFO.setAttribute("id","info");
    
    var H3 = document.createElement("h3");
    H3.innerHTML="恭喜您充值成功！";
    
    var P = document.createElement("p");
    P.innerHTML="充值单号为：<strong id=\"txtuid\">1653235</strong>（请您牢记，便于查询）";
    
    INFO.appendChild(H3);
    INFO.appendChild(P);
    
    var Btns=document.createElement("div");
    Btns.setAttribute("id","btns");
    
    var btnEnter=document.createElement("a");
    btnEnter.setAttribute("id","btnEnter");
    btnEnter.setAttribute("href","#1");
    
    var txtEnter=document.createTextNode("确定");
    
    btnEnter.appendChild(txtEnter);   
    Btns.appendChild(btnEnter);
    
    MSG.appendChild(INFO);
    MSG.appendChild(Btns);
    
    var cntRight=document.createElement("div");
    cntRight.setAttribute("id","msg-rightbar");
    
    Container.appendChild(cntLeft);
    Container.appendChild(MSG);
    Container.appendChild(cntRight);   
    
    var msgBottom = document.createElement("div");
    msgBottom.setAttribute("id","msg-bottom");
    
    var msgBLeft=document.createElement("div");
    msgBLeft.setAttribute("id","msg-bottom-left");
    
    var msgBRight=document.createElement("div");
    msgBRight.setAttribute("id","msg-bottom-right");
    msgBottom.appendChild(msgBLeft);
    msgBottom.appendChild(msgBRight);
    
    document.body.appendChild(shadow);
    obj.appendChild(divTitle);
    obj.appendChild(Container);
    obj.appendChild(msgBottom);
    document.body.appendChild(obj);

这里的代码，想必大家现在已经可以看明白了。我们又继续创建了其他的节点并给他们各自添加了不同的属性。不过在讲如何给节点追加子节点之前，先来介绍一下：element.createTextNode(data)。

element.createTextNode(data)--创建文本节点

前面我们一开始介绍了，节点有不同的类型，我们常用的就只有Element Node（元素节点）、Attribute Node（属性节点）、Text Node（文本节点）。前面我们已经介绍了如何创建Element节点（Element.createElement(tagName)），其实创建属性节点的方法我们也介绍了，就是element.setAttribute(AttributeName,value)。只是在XHTML中，我们一般不把属性作为一个节点来看待。

现在要讲的就是如何创建文本节点（TextNode）。在我的代码中，不知道您注意看了没有，我在将一个节点里增加文本时，使用了两个方法：

P.innerHTML="充值单号为：<strong id=\"txtuid\">1653235</strong>（请您牢记，便于查询）";

var txtTitle=document.createTextNode("爱唱卡充值");
H2.appendChild(txtTitle);

怎么看？先来看看element.createTextNode(data)/document.createTextNode("爱唱卡充值");这里的date="爱唱卡充值";然后使用appendChild(Element)方法，添加到标题节点。用个不恰当，但是却很形象的比喻，看看我这么写：

var date="爱唱卡充值";
H2.innerHTML=date;
P.innerHTML="充值单号为：<strong id=\"txtuid\">1653235</strong>（请您牢记，便于查询）";

呵呵，现在是不是看出两个方法之间的关系了（虽然这些说不恰当）。那我这里使用了innerHTML方法将“充值单号为：<strong id=\"txtuid\">1653235</strong>（请您牢记，便于查询）”这段代码添加到了P节点里，要是我们用纯DOM的方法，应该怎么做呢？

问题留给大家了，我这里就简单的给大家分析下，这段文档（document）的结构：

1、“充值单号为：”--是一个文本节点。
2、<strong/>标签是一个元素节点
3、strong标签有一个id属性（Attribute）
4、strong又包含了一个文本节点“1653235”
5、“（请您牢记，便于查询）”--是一个文本节点

这个问题大家好好想想，我接着介绍下面的问题，前面看到，只是创建了节点，是不够的。要想让用户看到他们，你必须要把这些节点添加到我们的文档（document） 中。

Element.appendChild(obj)，看到了这个方法了吗？看看他的名字append（追加）,child(孩子)。也就是说，我们要创建的那写节点，是作为子节点来追加到文档中的。

在前面我已经简单的给大家演示了节点之间的关系，那我们现在倒过来，对照我生成完成后的文档目录树的结构土来分析一下我们现在的这个例子的节点关系。          

图七

我们有一个标题拦节点window-tl，那么我们就创建一个标题栏节点：

var divTitle = document.createElement("div");
   divTitle.setAttribute("id","win-tl");

标题栏里有3个子节点，h2,closeBar,win-tr,

那我们就创建它们：

var H2 = document.createElement("h2");
var closeBar=document.createElement("div");
    closeBar.setAttribute("id","closebar");
    
var titleRight=document.createElement("div");
    titleRight.setAttribute("id","win-tr");     

而H2节点里又有一个img（元素）节点和一个文本节点，我们就创建并追加进去：

var IMG=document.createElement("img");
    IMG.setAttribute("src","img/win.png");
    IMG.setAttribute("alt","Window-Icon");
    
    var txtTitle=document.createTextNode("爱唱卡充值");
    
    H2.appendChild(IMG); 
    H2.appendChild(txtTitle);

接着是关闭按钮，里面有a标签，A标签又有一个文本节点，我们接着创建并追加进去：

var closeBar=document.createElement("div");
    closeBar.setAttribute("id","closebar");
    var A = document.createElement("a");
    /*
    以纯DOM的方法，我们这么写：
    var txtCloseWindow=document.createTextNode("关闭窗口");
    A.appendChild(txtCloseWindow);
    */
    A.innerHTML="关闭窗口";
    A.setAttribute("href","#1");
    A.setAttribute("id","btnClose");
    A.setAttribute("title","关闭窗口");
    
    closeBar.appendChild(A);

最后是这里的win-tr节点，我们创建完后，然后跟前面的H2和closeBar节点一起追加到标题节点（win-tl）中：
    

 var titleRight=document.createElement("div");
    titleRight.setAttribute("id","win-tr");    
  
    divTitle.appendChild(H2);
    divTitle.appendChild(closeBar);
    divTitle.appendChild(titleRight);

接下来是创建内容节点msg-content，里面包含左边框msg-leftbar、右边框msg-rightbar、正文msg和确定按钮：

var Container = document.createElement("div");
    Container.setAttribute("id","msg-content");
    
    var cntLeft=document.createElement("div");
    cntLeft.setAttribute("id","msg-leftbar");
    
    var MSG=document.createElement("div");
    MSG.setAttribute("id","msg");
    
    var cntRight=document.createElement("div");
    cntRight.setAttribute("id","msg-rightbar");

而正文中有包含标题h3和提示内容p：

 var INFO=document.createElement("div");
    INFO.setAttribute("id","info");
    
    var H3 = document.createElement("h3");
    H3.innerHTML="恭喜您充值成功！";
    
    var P = document.createElement("p");
    P.innerHTML="充值单号为：<strong id=\"txtuid\">1653235</strong>（请您牢记，便于查询）";
    
    INFO.appendChild(H3);
    INFO.appendChild(P);

接着添加提示按钮，而它里面有A标签和A标签的文本节点

 var Btns=document.createElement("div");
    Btns.setAttribute("id","btns");
    
    var btnEnter=document.createElement("a");
    btnEnter.setAttribute("id","btnEnter");
    btnEnter.setAttribute("href","#1");
    
    var txtEnter=document.createTextNode("确定");
    
    btnEnter.appendChild(txtEnter);   
    Btns.appendChild(btnEnter);

接下来就我就这样一步步的创建和追加。最后将这里的3大块，标题栏，提示内容和底边一起追加到提示框中,然后将shadow和提示框追加到文档中。

   document.body.appendChild(shadow);
    obj.appendChild(divTitle);
    obj.appendChild(Container);
    obj.appendChild(msgBottom);
    document.body.appendChild(obj);

到这里,我们程序基本上算完成了.现在就是稍加修饰下.让我们的提示框定位在shadow层之上,而且最好是在屏幕中央，这些问题CSS就可以搞定了.