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

我有一个javascript函数，它从ajax中获取一些值。从javascript中，我将该值添加到一个div中，该div默认显示为none。在来自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';

<!--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>

功能显示弹出窗口（id）
{
var advid=id；
$.ajax
({
类型：“post”，
url：“ajax\u getadv.php？function=getadv”，
数据：{id:advid}，
cache:false，
成功：功能（数据）{
var值=数据；
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=电子邮件；
如果（国家！=“”）
{
document.getElementById（“国家”）.innerHTML=国家；
}
其他的
{
document.getElementById（“国家”）.innerHTML=“不可用”；
}
if（web！=”“）
{
document.getElementById（“网站”）.innerHTML=web；
}
其他的
{
document.getElementById（“网站”）.innerHTML=“不可用”；
}
var generateHere=document.getElementById（“newlist”）；
var mycount=mytitle.length；
警报（mycount）；
对于（变量i=0；i

}

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

HTML div：

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

<!--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，id为newlist

要在HTML标记中写入，只需使用

innerHTML

，如下所示：

function divCall()
{
      document.getElementById('myDiv').innerHTML += 'your newly added text';

}

//make sure your div id is myDiv

---

现在和将来，w3草案和标准中有两个选项可用。。网络组件和shadowDOM

直到这些标准被广泛采用

您可以在Javascript中构建DOM元素，然后在分配给实际DOM的1中将其附加到文档体

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回调函数 使用helper函数创建并返回domeElement，我们在这里传递一个不明确的对象

    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标记来模拟元素，不包括button和div.modal-footer。CSS将接受这些更改，因此我认为指定样式没有任何意义

此时，我们通过在

document.body

中添加domeElement（和子元素）来关闭此函数

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

这会让你的过程更加清晰。但我不知道你打算怎么安排这份名单。您提供的HTML结构更像是一个控制面板

另外，我想明确指出，回调函数（您在代码示例中匿名定义）处理eventArg的方式不正确。。所以我不确定这是否是你遇到的问题。如果是，除了文档之外，您还应该使用浏览器调试器来调查这些问题。。。F12通常会调用开发人员控制台。。根据浏览器的不同，您需要在源（不是html dom窗口.“源”或外部文件）上设置断点。。然后，您可以在控制台中调用“showpopup（id）”功能。。它应该在断点处暂停。。然后，您可以使用控制台评估函数范围内的“e”事件参数。。或者，您可以将“e”对象添加到“监视表达式”面板。。这是所有标准的调试器接口。。现代网络浏览器无疑为我们开发者提供了一个改进和探索网络的好工具

返回的事件是一个jqXHR（XmlHttpRequest）。。它的文档是

一个完整的侧面说明：这个jqXHR对象很可能会在不久的将来发生变化（或者至少是这些文档）（真的扩展了）

XHR2现在支持两种较新的流行数据类型：blob和arraybuffer..'我认为，bson（二进制json）被认为是blob类型，但它实际上是一种混合介质，字符串和字节数据。。所以我不能完全确定。。我知道Newtonsoft.json已经在.Net框架上通过序列化支持它了

通过谷歌搜索，您可以找到关于XHR2（现在是XHR级别1）和blob、arraybuffer支持的更多信息

2012年1月的w3.org文档是。（当它还是二级的时候..在那里呆了很长时间） 最新版本规范于2014年1月发布w3.org：

---

但是XHR是一种生活标准，可以找到最新规范的“快照”

您真正想要做什么？顺便说一句，

$。ajax

部分当然不是普通的Javascript。。看起来是jQuery。。您应该这样标记您的问题，专门回答jQuery问题的人会更加注意。。。附加。。jQuery可能已经有了关于如何做到这一点的文档。我确信您可以访问选择器对象$（“thisID”）的带下划线的domeElement