javascript - 创建许多小的 html 表单

Question

我正在构建一个 wordpress 反馈插件，以便页面所有者可以将 div 放置在任何需要注意的页面上的任何部分，并弹出越来越多的表单来编辑各种属性。

我在 jquery 中构建表单，如下所示:

$('#myplugin').append('<div class="controls"></div>');
$('#myplugin .controls').append('<button type="button" id="tntb_shoot" class="btn btn-default"> <span class="glyphicon glyphicon-camera"></span> </button>')
$('#myplugin .controls').append('<button type="button" id="tntb_picture" class="btn btn-default"> <span class="glyphicon glyphicon-picture"></span> </button>')
$('#myplugin .controls').append('<button type="button" id="tntb_add" class="btn btn-default"> <span class="glyphicon glyphicon-plus"></span> </button>')
$('#myplugin .controls').append('<button type="button" id="tntb_list" class="btn btn-default"> <span class="glyphicon glyphicon-list"></span> </button>')

...一次只做一个元素感觉很糟糕

我觉得我应该在其他地方用普通的 html 编写它们，然后导入它们？我应该对平面 html 文件使用 ajax 吗？或者这是我要使用模板的地方？

我已经准备好接受你的智慧了!

更新 - 关于如何整理按钮组，adeneo 给了我一个很好的答案，但是我有文本区域、文本字段、 radio ，它们都适合待办事项列表...

Answer 1

如果您可以在文件中或其他地方使用模板，那是一种可行的方法，但按照您的方式进行操作并没有错，但它可能更符合逻辑，更容易创建元素等。

有点像

function getButton(id, icon) {
    var span = $('<span />',   {'class': 'glyphicon glyphicon-'+icon});
    var btn  = $('<button />', {'class': 'btn btn-default', id : 'tntb_'+id });

    return btn.append(span);
}

var controls = $('<div />', {'class' : 'controls'});

$('#myplugin').append(
    controls.append(
        getButton('shoot', 'camera'),
        getButton('picture', 'picture'),
        getButton('add', 'plus'),
        getButton('list', 'list')
    )
);