asehgal asehgal - 4 months ago 11
Javascript Question

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

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.

Answer

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>