Define the class of a li element created at runtime

Navigation
1

Below I have a stylized list with bootstrap (defining the class of ul and li ) 

<!DOCTYPE html>
<html>
<head>
    <link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Add itens a lista</title>
</head>
<body>
    <ul class="list-group">
        <li class="list-group-item">item 1</li>
        <li class="list-group-item">item 2</li>
        <li class="list-group-item">item 3</li>
        <li class="list-group-item">item 4</li>
        <li class="list-group-item">item 5</li>
    </ul>

</body>
</html>

The page looks like this:

However,Idonotneedastaticlist,butalistthatwilladditemswhenyouclickabutton.SofarIhavethecodebelow:

<!DOCTYPEhtml><html><head><linkhref="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Add itens a lista</title>
    <script>
        function addItem() {
            var li = document.createElement("li");
            /* Aqui deveria ser atribuída a class list-group-li
             * ao elemento li que acabou de ser criado
             * para que o mesmo apresente o design da class
             */
            li.class = "list-group-item";
             /* Porém acredito que a sintaxe esteja errada */
            li.innerHTML = "item n";
            var ul = document.getElementById("lista");
            ul.appendChild(li);
        }
    </script>
</head>
<body>
    <ul class="list-group" id="lista">
    <!--Aqui será inserido 1 item li ao clicar no botão input_add-->
    </ul>

    <form>
        <input type=button id=input_add 
            value="Add item a lista" onclick="addItem()">
    </form>
</body>
</html>

Adding a li item to the list works correctly, but I can not define a class for it, class list-group-item . The result then looks like this:

I need my li added by the javascript code to have the same design as the first image. Any suggestion? Is this logic assigning the class to an already created element?

    
asked by anonymous 10.03.2016 / 14:42

1 answer

1

Your code is practically right, only the name of the property that should be used that is wrong instead of class should use className 

li.className = "list-group-item";
    
10.03.2016 / 14:50
How to use the bootstrap collapse in this dynamic page? Put words in capital letters