Добавление Комплексный список HTML с помощью JavaScript

Question

У меня есть список HTML, но я хочу, чтобы добавить больше деталей в мой список

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

, но я хочу использовать JavaScript, чтобы добавить больше элементов в список и сделать его выглядеть следующим образом

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

Я попытался это с Javascript, но его не дает мне желаемого результата

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

но коммуникатор кодами, которые я пробовал, прежде чем некоторые работали, а другие - нет, вы можете их игнорировать, если хотите. Заранее спасибо.

Answer 1

Я бы выбрал это вместо этого; более модульные, используйте createElement и appendChild для ваших a элементов.

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']); 
    } 
}