动态生成div层的实例及注意事项

动态生成html代码，然后传给一个JS插件。

实例如下：

/// <summary>
/// 动态构造弹出层
/// </summary>
/// 1
/// add
/// 帝华
/// 10:11 2014/11/27
/// <param name="chapName">章节名称</param>
/// <param name="wordCount">字数</param>
/// <param name="chapContent">章节内容</param>
/// <returns>返回HTML代码</returns>
function GetPopupLayer(chapName,wordCount,chapContent)
{
    //1.最外层
    var divOut=$("<div>").css("display","none").attr("id","popup1");
    //1.1第一层
    var divFirst=$("<div>").addClass("popup sp1");
    //1.1.1第二层的关闭按钮
    var divClose=$("<div>").addClass("close");
    //1.1.1.关闭的组件a。
    //1.1.1.1生成
    var aButton=$("<a>").attr("title","关闭")
    .attr("onclick","fixed_box.close()")
    .attr("href","javascript:;");
    //1.1.1.2添加到上一层
    aButton.appendTo(divClose);
    //1.1.1.3组装关闭按钮
    divClose.appendTo(divFirst);
    //1.1.2第二层提示信息
    var divTitle=$("<div>").attr("title","点击按住左键，拖动浮层")
    .addClass("title").attr("onmousedown","fixed_box.move_xy()");
    //1.1.2.1将第二层提示信息添加到第一层
    divTitle.appendTo(divFirst);
    //1.1.3第二层的内容
    //这一层最复杂，包含章节信息
    var divCon=$("<div>").addClass("cont");
    //1.1.3.1内容下第一个元素
    var divSectionName=$("<div>").addClass("section_name clearfix");
    //1.1.3.1.1章节名称
    var dlClearFix=$("<dl>").addClass("clearfix");
    //1.1.3.1.1.1名称标签
    var dtChapName=$("<dt>").html("章节名称：");
    //1.1.3.1.1.2名称内容
    var ddChapName=$("<dd>").append($("<p>").addClass("name").attr("id","chapName").html(chapName));
    //组合到第一个元素
    dlClearFix.append(dtChapName).append(ddChapName);
    dlClearFix.appendTo(divSectionName);     
    //1.1.3.2内容下第二个元素，内容
    var divContent=$("<div>").addClass("section_content clearfix");
    //1.1.3.2.1 dl
    var dlSeClear=$("<dl>").addClass("clearfix");
    //1.1.3.2.1.1
    var dtSeClear=$("<dt>").html("当前章节：").append($("<i>").attr("id","txtWordCount").html("当前"+wordCount+"字"));
    //1.1.3.2.1.2
    var ddSeClaer=$("<dd>")
    .append($("<textarea>").addClass("textarea").attr("name","textarea").attr("id","textarea").html(chapContent));
    //组合到第二个元素
    dlSeClear.append(dtSeClear).append(ddSeClaer).appendTo(divContent);
    //1.1.3.3第三个元素
    var divButtonArea=$("<div>").addClass("button_area");
   //1.1.3.3.1第一个按钮
   var btnOne=$("<input>").addClass("button01").val("修改并同步")
   .attr("type","button").attr("id","saveAndSync");
   //1.1.3.3.2第二个按钮
   var btnTwo=$("<input>").addClass("button02").val("修改")
   .attr("type","button").attr("id","btSave");
   //1.1.3.3.3第三个按钮
   var btnThree=$("<a>").addClass("cancel").attr("href","javascript:;").html("取消修改");
   //1.1.3.3.4组合到第三个元素
   divButtonArea.append(btnOne).append(btnTwo).append(btnThree);
   //1.1.3.4组合三个元素到内容
   divCon.append(divSectionName).append(divContent).append(divButtonArea)
   .appendTo(divFirst);
   //1.2将第一层组合到最外层
   divFirst.appendTo(divOut); 
   return divOut.html();    
}

注意事项：

其中，divOut.html()跟divOut.innerHTML返回内容一样。设置style用css方法，不要用attr("style","display:none;");