Adding Complex html list via javascript

Question

I have a html list but i wish to add more items to my list

        <ul id="role_menu" class="box-content">
            <li  class="active"><a href="#" title="Dealt Cases">Add Dealt Cases</a></li>
            <li><a href="#" title="Live Stats">View Live Stats</a></li>
        </ul>

but i wish to use javascript to add more items to the list and make it look like this

        <ul id="role_menu" class="box-content">
            <li  class="active"><a href="#" title="Dealt Cases">Add Dealt Cases</a></li>
            <li><a href="#" title="Live Stats">View Live Stats</a></li>
            <li><a href="#" title="more 1">More 1</a></li>
            <li><a href="#" title="more 2">More 2</a></li>
            <li><a href="#" title="more 3">More 2</a></li>
        </ul>

I tried this with javascript but its not giving me the desired result

function create_admin_feature_list(){
var ul = document.getElementById("role_menu");
// alert("document ul ="+ul);
var li_edit_staff_info = document.createElement("li");
var li_make_annoucements = document.createElement("li");
var li_egenerate_reports = document.createElement("li");

li_edit_staff_info.add('<a href="#" title="Edit info">Edit Staff Info</a>');
li_make_annoucements.add('<a href="#" title="Make Notices">Make Notices</a>');
li_egenerate_reports.add('<a href="#" title="Generate Reports">Generate Reports</a>');

//var li_a1 = document.createElement("a");
//var li_a2 = document.createElement("a");
//var li_a3 = document.createElement("a");

//li_a1.appendChild(document.createTextNode("Edit Staff Info"));
//li_a2.appendChild(document.createTextNode("Make Notices"));
//l1_a3.appendChild(document.createTextNode("Generate Reports"));

//li_edit_staff_info.appendChild(document.createTextNode("Edit Staff Info"));
//li_make_annoucements.appendChild(document.createTextNode("Make Notices"));
//li_egenerate_reports.appendChild(document.createTextNode("Generate Reports"));

//li_edit_staff_info.setAttribute("id", "edit_staff"); // added line
//li_make_annoucements.setAttribute("id", "make_notice"); // added line
//li_egenerate_reports.setAttribute("id", "genrate_info");// added line

//li_edit_staff_info.appendChild(li_a1);
//li_make_annoucements.appendChild(li_a2);
//li_egenerate_reports.appendChild(li_a3);




ul.appendChild(li_edit_staff_info);
ul.appendChild(li_make_annoucements);
ul.appendChild(li_egenerate_reports);
}

But the commented codes are the one i tried before some worked and others didn't, you can ignore them if you want. Thanks in advance.

score 1 · Accepted Answer · 2016-04-29 12:24:07Z

I would set it up like this instead; more modular, use createElement and appendChild for your a elements as well.

function insert_a(node, href, title, text) {
    var a = document.createElement('a');
    a.href = href;
    a.title = title;
    a.textContent = text;
    node.appendChild(a);
    return a;
}

function insert_li(node) {
    var li = document.createElement('li');
    node.appendChild(li);
    return li; 
}

function create_admin_feature_list() {
    var list_content = [ 
        {'href':'#', 'title':'Edit info', 'text':'Edit Staff Info'},
        {'href':'#', 'title':'Make Notices', 'text':'Make Notices'},
        {'href':'#', 'title':'Generate Reports', 'text':'Generate Reports'}
    ];

    var ul = document.getElementById('role_menu');
    for (var i = 0; i < list_content.length; i++) {
        var li = insert_li(ul);
        insert_a(li, list_content[i]['href'], list_content[i]['title'],
            list_content[i]['text']);
    }
}

Collectives™ on Stack Overflow

Adding Complex html list via javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related