Question

我已经使用JQuery追加函数在我的div中使用id = main_area创建了一个div现在我要做的是在div中添加一些元素，如输入字段和按钮，id = this_one如何才能完成？

$('#main_area').append('<div id="this_one">first div</div>');

Answer 1

最高效的方法是一次性添加所有内容：

var HTML = "<div id=\"this_one\"><input type=\"text\"> ... </div>";
 $('#main_area').append(HTML);

但你当然可以选择新添加的元素然后添加额外的东西：

$('#main_area').append('<div id="this_one">first div</div>');
var HTML = "<input type=\"text\"> ...";
$("#this_one").append(HTML);

Answer 2

您可以像使用append()一样使用。在这种情况下，最好先创建html输出，然后一次追加所有内容以避免过度重排。操纵DOM很慢。

var output = '<div><ul><li><label></label></li></ul></div>';
$('#main_area').append(output);

如果您要添加多个代码，也可以使用appendTo()，这可能会更好：

$('<div><ul><li><label></label></li></ul></div>').appendTo('#main_area');

Answer 3

只需通过#this_one引用它：

$('#main_area').append('<div id="this_one">first div</div>');

var $this_one = $('#this_one');

$this_one.append('<p>Hello World!</p>');
$this_one.append('<p>Appended <input type="text"/></p>');
$this_one.append('<p>More fun stuff.</p>');

http://jsfiddle.net/pYrTw/1/

...替代地

var $this_one = $('<div id="this_one">first div</div>');

$this_one.append('<p>Hello World!</p>');
$this_one.append('<p>Appended <input type="text"/></p>');
$this_one.append('<p>More fun stuff.</p>');

$('#main_area').append($this_one);

http://jsfiddle.net/pYrTw/2/

如果您尝试删除点击的元素，只要您可以选择要删除的内容，就可以使用$.on()：

var $this_one = $('<div id="this_one">first div</div>');

var clickRemove = function(){
    $(this).remove();
};

$('#main_area').on('click', 'p', clickRemove);

$this_one.append('<p>Hello World!</p>');
$this_one.append('<p>Appended <input type="text"/></p>');
$this_one.append('<p>More fun stuff.</p>');

$('#main_area').append($this_one);

http://jsfiddle.net/pYrTw/4/

添加点击的另一种方法 - ＆gt;删除处理程序：

var $main_area = $('#main_area'),
    $this_one = $('<div id="this_one">first div</div>');

function appendContent($j, html){
    var $html = $(html);

    var clickRemove = function(){
        $(this).remove();
    };

    $html.click(clickRemove);

    $j.append($html);
}

appendContent($this_one, '<p>Hello World!</p>');
appendContent($this_one, '<p>Appended <input type="text"/></p>');
appendContent($this_one, '<p>More fun stuff.</p>');

$main_area.append($this_one);

http://jsfiddle.net/pYrTw/5/

使用jquery插入元素

3 个答案: