javascript - 添加列表组项，其中包含使用 JS 将输入输入到 ul 的表单

Question

这是我在 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>

如何在单击按钮时使用 JQuery/JS 将 li 添加到 ul ？网络技术和开发的新手。感谢帮助。

Answer 1

如果你想使用jquery添加html，你可以使用方法.append/.html ...

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

所以你可以做的就是复制 html 并附加它

$('#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>')
})

但是我看到你在代码中使用了 php，所有代码片段要做的就是复制按原样渲染的 html， 我假设您希望它包含来自服务器的一些数据，所以我建议您使用模板，并在单击时检索数据，然后使用该模板和数据附加 html。

了解更多:

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