0

I have a ul and tag with class as

<ul class="nested-dm2"></ul>

I want to append the below li tags to ul using jquery.

How can I do this?

 <li><span class='d-inline-block'>Oracle</span>&nbsp;&nbsp;&nbsp;<span>localhost(OT)</span><i class="ion-edit oracle show d-block ml-2" data-toggle="modal" data-target="#myModalsource" data-backdrop="static" data-keyboard="false"></i></li>
                    <li><span class='d-inline-block'>PostgresSQL</span>&nbsp;&nbsp;&nbsp;<span>localhost(sample_db)<span><i class="ion-edit postgress noshow d-block ml-2" data-toggle="modal" data-target="#myModalsource" data-backdrop="static" data-keyboard="false"></i></li>
                    <li><span class='d-inline-block'>MySql</span>&nbsp;&nbsp;&nbsp;<span>localhos(customer)</span><i class="ion-edit mysql noshow d-block ml-2" data-toggle="modal" data-target="#myModalsource" data-backdrop="static" data-keyboard="false"></i></li>
                    <li><span class='d-inline-block'>Excel</span>&nbsp;&nbsp;&nbsp;<span>C://Excel//customer.xlsx</span><i class="ion-edit excel noshow d-block ml-2" data-toggle="modal" data-target="#myModalsourceExcel" data-backdrop="static" data-keyboard="false"></i></li>
shee8
  • 139
  • 10
  • First child tag inside ul can only be li. Div is not allowed as first child in ul. – caramba Nov 25 '20 at 06:16
  • this is not a hard task, but your approach is wrong, you can not have the div directly inside a UL, a UL should always have Li as its direct child , correct that first then i would help you to append the LI – Atul Rajput Nov 25 '20 at 06:16
  • I wanted a scroll for li elements hence added div tag.If any other approach for scrolling of ul is provided it will be helpful.Have removed the div. – shee8 Nov 25 '20 at 06:17
  • Does this answer your question? [jQuery append() - return appended elements](https://stackoverflow.com/questions/2159368/jquery-append-return-appended-elements) – caramba Nov 25 '20 at 06:23

2 Answers2

0
var html = `<li><span class='d-inline-block'>Oracle</span>&nbsp;&nbsp;&nbsp;<span>localhost(OT) 
   </span><i class="ion-edit oracle show d-block ml-2" data-toggle="modal" data- 
   target="#myModalsource" data-backdrop="static" data-keyboard="false"></i></li>
                <li><span class='d-inline-block'>PostgresSQL</span>&nbsp;&nbsp;&nbsp; 
   <span>localhost(sample_db)<span><i class="ion-edit postgress noshow d-block ml-2" 
   data-toggle="modal" data-target="#myModalsource" data-backdrop="static" data- 
   keyboard="false"></i></li>
                <li><span class='d-inline-block'>MySql</span>&nbsp;&nbsp;&nbsp; 
   <span>localhos(customer)</span><i class="ion-edit mysql noshow d-block ml-2" data- 
   toggle="modal" data-target="#myModalsource" data-backdrop="static" data- 
   keyboard="false"></i></li>
                <li><span class='d-inline-block'>Excel</span>&nbsp;&nbsp;&nbsp; 
   <span>C://Excel//customer.xlsx</span><i class="ion-edit excel noshow d-block ml-2" 
   data-toggle="modal" data-target="#myModalsourceExcel" data-backdrop="static" data- 
   keyboard="false"></i></li>`     
$("nested-dm2").append(html);
0

Vusal Ghansanov's answer looks like it would work. You just have the set what you want to append to a variable, and then append the varible. (I just wanted to give an explanation of what I see.)

bobsfriend12
  • 418
  • 4
  • 8