发表新帖
发表新帖

Create ul and li elements in javascript.

后端 未结
关注
4 1410
孤街浪徒
孤街浪徒 2020-12-08 15:51

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(\'
相关标签:
4条回答
  • 闹比i
    2020-12-08 15:59

    Here is my working code :

    <!DOCTYPE html>
<html>
<head>
<style>
   ul#proList{list-style-position: inside}
   li.item{list-style:none; padding:5px;}
</style>
</head>
<body>
    <div id="renderList"></div>
</body>
<script>
    (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;
        }
    })();
</script>
</html>

    working jsfiddle example here

    0 讨论(0)
  • 情深已故
    2020-12-08 16:03

    Try out below code snippet:

     var list = [];
 var text;

function update() {
    console.log(list);    

    for (var i = 0; i < 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 += "<li>"  + list[i] + "</li>";
    }

 document.getElementById("list").innerHTML = letters;

}

function myFunction() {
    text = prompt("enter TODO");  
    list.push(text);
    update();
}
    0 讨论(0)
  • 眼角桃花
    2020-12-08 16:12

    Use the CSS property list-style-position to position the bullet:

    list-style-position:inside /* or outside */;
    0 讨论(0)
  • 误落风尘
    2020-12-08 16:12

    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.<div id="contentSectionID"></div>

    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<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));
    0 讨论(0)
 看不清?
提交回复
热议问题