Generate a list in javascript and add it to a div in html

Question

I have a javascript function which gets some values from ajax. From javascript I add that values to a div whose display is by default none. In my function from ajax i also gets an array of values. My task is to make a list on html inside my div based on the array values. Can anyone help me to do this..

Javascript function:

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

}

Here mytitle is the array which i want to display as list. I've put a for loop to create a list in the div. I have to show mytitle rather than My text.

HTML div:

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

It is in this div i want to create a list. I've added a new div with id newlist

Answer 1

There are a couple of options becoming available in w3 drafts and standards these days and into the future.. webcomponents and shadowDOM specifically..

until those become widely adopted standards..

You can look to building DOM elements in Javascript HtmlDOMElement and than attach it to the document body in 1 assignment to the actual 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);
}

Helper Function

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 Callback Function

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

use the helper function to create and return the DOMElement, we're passing an ambiguous object here.

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

This is sample data.. You would, of course, use your data, and structure: I just mimicked the elements with the fieldset tag, excluding the button and div.modal-footer. CSS will pick up on the changes, so I didn't see any point in specifying the styles.

At this point, we tapper this function off by adding the DOMElement (and the children) in the document.body.

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

This should really make the process clearer for you. But I don't know exactly how you intended to structure the list. The HTML structure you provided seems more like a control panel.

Also, I want to explicitly point out that your callback function (which you were defining anonymously in your code sample) was handling the eventArg improperly.. so I'm not sure if that was the underline issue you were having or not. If it was, you aside from the documentation, you should use the browser debugger to investigate these matters... F12 will usually invoke the developer console.. depending on the browser, you'll need to set breakpoints on the source (not html dom window.. the 'sources' or external files).. then you can invoke the 'showpopup(id)' function in the console.. it should pause at the breakpoint.. then you can either use the console to evaluate the 'e' eventArg within the scope of the function.. or you can add the 'e' object to the watch expressions' panel.. this is all standard debugger interfacing.. modern web browsers have sure given us developers a great tool to improve and explore the web with.

the event returned is a jqXHR (XmlHttpRequest).. the documentation on it is here

On a complete side note: It is likely that this jqXHR object will change (or at least these documents) in the near future (extended really)..

there are two newer prevalent dataTypes supported by XHR2 now, blob and arraybuffer.. 'bson' (Binary json) is, I think, considered a blob type, but it really has sort of a mixed medium, string and byte data.. so I'm not entirely sure about it.. I know Newtonsoft.json supports it with serialization on the .Net framework already.

You can find more information about XHR2 (which is XHR Level 1 now) and blob, arraybuffer support by googling it..

The Jan 2012 w3.org documentation is here. (when it was still level-2.. and stayed at for pretty darn long) The newest release spec was in Jan 2014 w3.org: here

But XHR is a Living Standard, and a 'snapshot' of the most recent spec can be found here

Answer 2

To write inside an HTML tag, simply use innerHTML as shown below:

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

}

//make sure your div id is myDiv