add list group item that contains a form with inputs to a ul using JS

Question

This is my markup in HTML5

<ul class="list-group">
    <li class="list-group-item">
        <form action="" method="post">
            <div>
                <span class="categoryname"><?php htmlout($category['name']); ?></span>
                <input type="hidden" class="id" name="id" value="<?php echo $category['id']; ?>">
                <input type="hidden" name="project" value="<?php echo $projectid; ?>">
                <button type="button" name="action" value="Edit" class="edit btn pull-right btn-link" data-toggle="tooltip" title="Edit Name">
                    <i class="glyphicon glyphicon-edit" style="font-size: large; color: black"></i>
                </button>
            </div>
        </form>
    </li>
</ul>

How can I add a li to the ul using JQuery/JS on a button click ? New to web technologies and development. Help appreciated.

score 2 · Accepted Answer · edited May 23 '17 at 11:44

2

if you want to add html using jquery you can use the methods .append/.html ...

http://api.jquery.com/append/

so what you can do is copy the html and append it

$('#myButton').on('click', function(e) {
    var html = $('#what-i-want-to-copy').html(); // returns a string
    $('#ul').append(html)

    // or you can add plain text
    $('#ul').append('<li></li>')
})

but i see you are using php inside your code there, and all that snippet of code will do is copy the html rendered as is, and im assuming you want it with some data from the server, so i would suggest you use templates, and retrieve the data on click and then append the html using that template and data.

Read more:

Explanation of <script type = "text/template"> ... </script>

edited May 23 '17 at 11:44

Community

1
1

answered Jul 28 '16 at 19:56

WalksAway

2,769
2
20
42

if I gave that `li` an `id` would it copy all its children like the form inputs and buttons as well ? – marc Jul 28 '16 at 20:00
the id i put there is just a selector you can use a class or an attribute etc... but yes using `.html()` returns a string of the element`s contents and then you can append it – WalksAway Jul 28 '16 at 20:03
but it will copy the html as is!!! if you want the data inside to be different (data from the server i mean) i would suggest using templates – WalksAway Jul 28 '16 at 20:04
also it will not duplicate the listeners... be aware of that, if you had an onclick listener for a button inside that `li` and then copied it, **it will not** duplicate the listener, you will need to bind it again – WalksAway Jul 28 '16 at 20:05
thanks for the help ! appreciate it I accepted your answer – marc Jul 28 '16 at 21:46

score 1 · Answer 2 · answered Jul 28 '16 at 21:57

Pure JavaScript solution.

function foo() {
//assuming this is the first DOM element with "list-group" class.
document.querySelector(".list-group").innerHTML += "<li>your content</li>";

/* 
or,

document.getElementsByClassName("list-group")[0].innerHTML += "<li>your content</li>";

or, 

var li = document.createElement("li");
var inside = document.createTextNode("your text");
li.appendChild(inside);
document.querySelector(".list-group").appendChild(li); 

*/


}

<ul class="list-group">
    <li class="list-group-item">
        <form action="" method="post">
            <div>
                <span class="categoryname">Lorem</span>
                <input type="hidden" class="id" name="id" value="1">
                <input type="hidden" name="project" value="2">
                <button type="button" name="action" value="Edit" class="edit btn pull-right btn-link" data-toggle="tooltip" title="Edit Name" onclick="foo()">
           Click Me
                </button>
            </div>
        </form>
    </li>
</ul>

thanks. How can I bind a listener that I had on `$('.edit')` after the new `li` is added ? it seems like the button click doesnt work on the newly added `li` — marc, Jul 28 '16 at 22:44
sorry, didn't actually get, what you intend? is it what you want - `document.querySelector(".edit").addEventListener("click", someFunction)` ? — marmeladze, Jul 29 '16 at 00:32
since all the `li` have a button as a child, will the new dynamically added buttons remain bound to the same listener ? I am using `$("#edit").click()` to generate events — marc, Jul 29 '16 at 00:48

add list group item that contains a form with inputs to a ul using JS

2 Answers2