javascript - 在javascript中生成一个列表并将其添加到html中的div

Question

我有一个 javascript 函数，它从 ajax 获取一些值。从 javascript 我将该值添加到默认显示为无的 div。在我的 ajax 函数中，我还得到了一个值数组。我的任务是根据数组值在我的 div 中制作一个 html 列表。 谁能帮我做这个..

Javascript 函数:

function showpopup(id)
{
var advid=id;
$.ajax
({
    type:"post",
    url:"ajax_getadv.php?function=getadv",
    data:{id:advid},
    cache:false,
    success:function(data){
        var values=data;
        var myarray=values.split("/");
        var name=myarray[0];
        var email=myarray[1];
        var country=myarray[2];
        var web=myarray[3];
        var advid=myarray[4];
        var count=myarray[5];
        var val=myarray[6]
        var mytitle=val.split(",");
        document.getElementById("advname").innerHTML = name;
        document.getElementById("advid").innerHTML = advid;
        document.getElementById("email1").innerHTML = email;
        if(country!="")
        {
            document.getElementById("country").innerHTML = country;
        }
        else
        {
            document.getElementById("country").innerHTML = "Not Available";
        }
        if(web!="")
        {
            document.getElementById("website").innerHTML = web;
        }
        else
        {
            document.getElementById("website").innerHTML = "Not Available";
        }
var generateHere = document.getElementById("newlist");
           var mycount=mytitle.length;
        alert(mycount);

         for( var i =  0 ; i < mycount ; i++)
         {  
            generateHere.innerHTML = '<div class="someclass"><ul><li>My Text</li></ul></div>';
         }
    }   
});

document.getElementById('box-config-modal1').style.display='block';

这里 mytitle 是我想显示为列表的数组。我放了一个 for 循环来在 div 中创建一个列表。我必须显示 mytitle 而不是我的文字。

HTML 格:

<!--SHOW MODAL 1-->
<div id="box-config-modal1" class="modal hide fade in" style="display: none;">
<div class="box" id="box-details">
<h4 class="box-header round-top">Details</h4>
<div class="box-container-toggle" style="padding-left:20px;padding-right:20px;">
    <div class="box-content" >
    <form name="popup" id="popup" >
    <fieldset>
        <button class="close" data-dismiss="modal"></button>
        <h3>User Details</h3>
        <div class="control-group">
            <div class="controls"> <label class="control-label" for="typeahead" style="width:100px;float:left;" >Name </label><label id="advname" style="padding-left:150px;"></label></div>
        </div>
        <div class="control-group">
            <div class="controls"><label class="control-label" for="typeahead" style="width:100px;float:left;" >ID </label><label id="advid" style="padding-left:150px;"></label></div>
        </div>
        <div class="control-group">
            <div class="controls"><label class="control-label" for="typeahead" style="width:100px;float:left;">Email </label><label id="email1" style="padding-left:150px;"></label></div>
        </div>
        <div class="control-group">
            <div class="controls"><label class="control-label" for="typeahead" style="width:100px;float:left;">Country </label><label  id="country" style="padding-left:150px;"></label ></div>
        </div>
        <div class="control-group">
            <div class="controls"><label class="control-label" for="typeahead" style="width:100px;float:left;">Website </label><label  id="website" style="padding-left:150px;"></label ></div>
        </div>
<div class="" id="newlist">
</div>
        <div class="modal-footer">
            <a href="" onClick="window.close()" class="btn btn-primary" data-dismiss="modal">Exit</a>
        </div>
        </fieldset>
    </form>
    </div>
</div>  
</div>

我想在这个 div 中创建一个列表。我添加了一个新的 div with id newlist

Answer 1

现在和 future 的 w3 草案和标准中有几个可用的选项。特别是 webcomponents 和 shadowDOM。

直到这些成为被广泛采用的标准..

您可以查看在 Javascript 中构建 DOM 元素 HtmlDOMElement然后将它附加到文档正文中，在 1 次赋值给实际的 DOM。

function showpopup(id)
{
    var advid=id,
        options = {
            type:"post",
            url:"ajax_getadv.php?function=getadv",
            data:{id:advid},
            cache:false,
            success: OnSuccess
        };

    $.ajax(options);
}

辅助函数

function createControlGroup(options) {
   var options = options || {};


   options.id = options.id  || "ukn-"+Date.now();
   options.for = options.for || options.id;
   options.displayText = options.displayText || "NotSet";
   options.displayValue = options.displayValue || "Unknown";

   var cntrlGrpElm = document.createElement("div"),
       cntrlElms = document.createElement("div"),
       cntrlLabel1 = document.createElement("label"),
       cntrlLabel2 = document.createElement("label");

   var cntrlGrpElmClass=document.createAttribute("class"),
       cntrlElmsClass=document.createAttribute("class"),
       cntrlLabel1Class=document.createAttribute("class");

   cntrlGrpElmClassAttr.nodeValue="control-group";
   cntrlGrpElm.attributes.setNamedItem(cntrlGrpElmClassAttr);

   cntrlElmsClass.nodeValue="controls";
   cntrlElms.attributes.setNamedItem(cntrlElmsClass);

   cntrlLabel1Class.nodeValue="control-label";
   cntrlLabel1.attributes.setNamedItem(cntrlLabel1Class);


   var cntrlLabel2Id=document.createAttribute("id");
   cntrlLabel2Id.nodeValue=options.id;
   cntrlLabel2.attributes.setNamedItem(cntrlLabel2Id);

   var cntrlLabel1For=document.createAttribute("for");
   cntrlLabel1For=options.for;
   cntrlLabel1.attributes.setNamedItem(cntrlLabel1For);

   var cntrlLabel1Text = document.createTextNode(options.displayText),
       cntrlLabel2Text = document.createTextNode(options.displayValue);

   cntrlLabel1.appendChild(cntrlLabel1Text);
   cntrlLabel2.appendChild(cntrlLabel2Text);

   cntrlElms.appendChild(cntrlLabel1);
   cntrlElms.appendChild(cntrlLabel2);

   cntrlGrpElm.appendChild(cntrlElms);

   return cntrlGrpElm;
}

OnSuccess 回调函数

function OnSuccess(e) {    
    var values=e.responseText;

    var myarray=values.split("/");

    var name=myarray[0],
        email=myarray[1],
        country=myarray[2],
        web=myarray[3],
        advid=myarray[4],
        count=myarray[5],
        val=myarray[6];

    var mytitle=val.split(",");

    var title1=mytitle[0],
        title2=mytitle[1],
        title3=mytitle[2];

使用辅助函数创建并返回 DOMElement，我们在这里传递了一个不明确的对象。

    var cntrlGrpElms = document.createElement("fieldset");
    var cntrlGrpElmsClass = document.createAttribute("class");
    cntrlGrpElmsClass.nodeValue = "contrl-group-list";
    cntrlGrpElms.attributes.setNamedItem(cntrlGrpElmsClass);

    cntrlGrpElms.appendChild(createControlGroup({"id":"item-1","displayText":"Item 1", "displayValue":"Value of Item 1"}));
    cntrlGrpElms.appendChild(createControlGroup({"id":"item-2","displayText":"Item 2", "displayValue":"Value of Item 2"}));
    cntrlGrpElms.appendChild(createControlGroup({"id":"item-3","displayText":"Item 3", "displayValue":"Value of Item 3"}));
    cntrlGrpElms.appendChild(createControlGroup({"id":"item-4","displayText":"Item 4", "displayValue":"Value of Item 4"}));

这是示例数据。当然，您会使用您的数据和结构:我只是模仿了带有 fieldset 标签的元素，不包括按钮和 div.modal-footer。 CSS 会接受更改，所以我看不出指定样式有任何意义。

此时，我们通过在 document.body 中添加 DOMElement(和子元素)来关闭此功能。

    document.body.appendChild(cntrlGrpElms);
}  /* End of - $.ajax - 'OnSuccess' Callback*/

这应该能让您更清楚地了解流程。但我不确切知道你打算如何构建列表。您提供的 HTML 结构看起来更像是一个控制面板。

此外，我想明确指出您的回调函数(您在代码示例中匿名定义的)未正确处理 eventArg.. 所以我不确定这是否是您遇到的下划线问题.如果是的话，除了文档，你应该使用浏览器调试器来调查这些问题...... F12 通常会调用开发者控制台.. 根据浏览器的不同，你需要在源代码上设置断点(不是 html dom 窗口..“源代码”或外部文件)..然后您可以在控制台中调用“showpopup(id)”函数..它应该在断点处暂停..然后您可以使用控制台评估“e' eventArg 在函数的范围内.. 或者你可以将 'e' 对象添加到 watch expressions' 面板.. 这是所有标准的调试器接口(interface).. 现代网络浏览器确实为我们开发人员提供了一个很好的工具来改进和浏览网页。

返回的事件是一个 jqXHR (XmlHttpRequest).. 它的文档是 here

完整的旁注:这个 jqXHR 对象很可能会在不久的将来(或至少这些文档)发生变化(真的扩展了)..

XHR2 现在支持两种较新的流行数据类型，blob 和 arraybuffer。我认为“bson”(二进制 json)被认为是一种 blob 类型，但它确实具有某种混合介质、字符串和字节数据.. 所以我对此并不完全确定.. 我知道 Newtonsoft.json 已经通过 .Net 框架上的序列化支持它。

您可以通过谷歌搜索找到有关 XHR2(现在是 XHR 级别 1)和 blob、arraybuffer 支持的更多信息。

2012 年 1 月的 w3.org 文档是 here . (当它仍然是 2 级时......并且停留了相当长的时间) 最新的发布规范是 2014 年 1 月 w3.org:here

但 XHR 是一个现行标准，可以找到最新规范的“快照”here