Create ul and li elements in javascript

Question

I am trying to create ul and li element in my codes by using javascript  I have following   var test document createElement  section    test setAttribute  id   test     var ul document createElement  ul      document body appendChild test   test appendChild ul    for  var i 0  i lt array length  i          var li document createElement  li         ul appendChild li       li innerHTML li innerHTML   array i        My array is parsed using json encode from php  array 0   aaa   array 1   bbb   array 2   ccc     CSS  section         display  block      width  200px      margin  50px auto      border  3px solid red       Everything works fine except the list style dot is outside of my section tag    It displays like this in Chrome and IE but firefox work fine    -------------    aaa            bbb            ccc          -------------   I want my dot inside my section tag  Anyone idea  Thanks a lot

User · Accepted Answer

Use the CSS property list-style-position to position the bullet   list-style-position inside    or outside

User · Answer

Try out below code snippet    var list        var text   function update         console log list            for  var i   0  i  lt  list length  i             console log  i           var letters         var ul   document getElementById  list           var li   document createElement  li            li appendChild document createTextNode list i            ul appendChild li           letters      lt li gt      list i      lt  li gt            document getElementById  list   innerHTML   letters      function myFunction         text   prompt  enter TODO          list push text       update

User · Answer

Here is my working code     lt  DOCTYPE html gt   lt html gt   lt head gt   lt style gt     ul proList list-style-position  inside     li item list-style none  padding 5px    lt  style gt   lt  head gt   lt body gt       lt div id  renderList  gt  lt  div gt   lt  body gt   lt script gt       function            var ul   document createElement  ul            ul setAttribute  id   proList             productList     Electronics Watch   House wear Items   Kids wear   Women Fashion             document getElementById  renderList   appendChild ul           productList forEach renderProductList            function renderProductList element  index  arr                var li   document createElement  li                li setAttribute  class   item                 ul appendChild li                li innerHTML li innerHTML   element                       lt  script gt   lt  html gt    working jsfiddle example here

User · Answer

Great then  Let s create a simple function that takes an array and prints our an ordered listview list inside a div tag   Step 1  Let s say you have an div with  contentSectionID  id  lt div id  contentSectionID  gt  lt  div gt   Step 2  We then create our javascript function that returns a list component and takes in an array   function createList spacecrafts    var listView document createElement  ol     for var i 0 i lt spacecrafts length i          var listViewItem document createElement  li        listViewItem appendChild document createTextNode spacecrafts i         listView appendChild listViewItem      return listView      Step 3  Finally we select our div and create a listview in it   document getElementById  contentSectionID   appendChild createList myArr

[javascript] Create ul and li elements in javascript.

Examples related to javascript