javascript - 使用innerHtml从javascript在ul中添加ul

Question

我正在构建一个页面，我需要在其中更改ul使用 javascript 的内容。其中一个li需要包含另一个ul，它仅在li单击 时出现。第一部分正在工作，我可以更改 otter 的内容ul，但是当我单击时li没有任何反应。我的JavaScript：

function changeSidecontent(tap){
    if(tap=="users")
    document.getElementById("rightUnorderedList").innerHTML=
    '<li><a href="#"><i class="SAU-icons-2 icon-1"></i>أعضاء هيئة التدريس</a></li>\
     <li><a href="#"><i class="SAU-icons-2 icon-1"></i>الطلاب</a></li>\
     <li><a href="#"><i class="SAU-icons-2 icon-1"></i>الموظفون</a></li>'

    if(tap=="courses")
    document.getElementById("rightUnorderedList").innerHTML=
    '<li class=""><a  class="SAU-ul-toggler" href="#"><i class="SAU-icons-2 icon-4"></i>المقرارات<i class="fa fa-angle-left float-l"></i></a>\
        <ul class="SAU-ul-sub none">\
        <li><a href="#">محاضرة</a> </li>\
        <li><a href="#">عملي</a></li>\
        <li><a href="#">تدريب</a></li>\
        <li><a href="#">تمارين</a></li>\
    </ul>\
</li>\
    <li><a href="#"><i class="SAU-icons-2 icon-1"></i>المقررات الاساسية</a></li>\
    <li><a href="#"><i class="SAU-icons-2 icon-1"></i></a></li>'

    if(tap=="organizations")
    document.getElementById("rightUnorderedList").innerHTML=
    '<li><a href="#"><i class="SAU-icons-2 icon-1"></i>ORG1</a></li>\
    <li><a href="#"><i class="SAU-icons-2 icon-1"></i>ORG2</a></li>\
    <li><a href="#"><i class="SAU-icons-2 icon-1"></i>ORG3</a></li>'

}

我的html：

<nav class="SAU-main-nav">
        <div class="container">
            <div class="row">
                <div class="SAU-username col-md-4">
                    <h2></h2>
                </div><!--SAU-username -->
                <div class="SAU-main-menu col-md-8  align-l" >
                    <ul class=" first-level-ul  ">         
                        <li class="first-level-li"><a href="javascript:void(0);" onclick="changeSidecontent('users');"><i class="SAU-icons-1 icon-5"></i><span></span>المستخدمين</span></a></li>
                        |
                        <li class="first-level-li"><a href="javascript:void(0);" onclick="changeSidecontent('courses');"><i class="SAU-icons-1 icon-1"></i><span></span>المقررات</span></a></li>
                        |
                        <li class="first-level-li"><a href="javascript:void(0);" onclick="changeSidecontent('organizations');"><i class="fa fa-home fa-3x "></i><span></span>المنظمات</span></a></li>

                    </ul>



                </div><!--SAU-main-menu -->
            </div><!--row -->
        </div><!--container -->
    </nav><!--SAU-main-nav -->
    <section class="SAU-main-container container">
        <div class="row">
             <aside class="SAU-right-menu col-md-3 ">
                <ul id="rightUnorderedList"></ul>

亲切的问候。

标签： javascripthtml