Question

我正在尝试将多个对象添加到一个div。

代码

            var button1 = $('<button/>',{
                type: "button",
                class: "btn btn-defaultl btn-sm",
                html: span1
            });

            var button2 = $('<button/>',{   
                type: "button",
                class: "btn btn-defaultl btn-sm",
                html: span2
            });

            var h3 = $('<h3/>',{
                text: value.name
            })

            var inner_div = $('<div/>',{
                class: 'col-xs-8',
                html: h3.append(button1).append(button2)

            });

请原谅我的命名，这将被更改

目标我希望有这样的结构

<div class="col-xs-8">
   <h3></h3>
   <button1 ... />
   <button2 ... />
</div>

但是代码现在把所有东西放在彼此里面

<div class="col-xs-8">
   <h3>
        <button1 ... />
        <button2 ... />
    </h3>
</div>

我应该使用哪个jquery函数？

Answer 1

而不是.append()使用.after()

var inner_div = $('<div/>',{
                class: 'col-xs-8',
                html: h3.after(button1).after(button2)

 });

Answer 2

相反，您可以使用.append()将这些元素直接添加到div中，如

var inner_div = $('<div/>', {
    class: 'col-xs-8'
}).append(h3).append(button1).append(button2);

在您的情况下，您要添加的button元素是h3的子元素，然后将h3添加为div

的子元素

Answer 3

在追加h3本身之前，您将按钮元素附加到h3。使用after()代替append()。

 html: h3.after(button1).after(button2)

然而，更好的替代方法是首先创建包含div，然后在创建其他元素时附加到它。试试这个：

var $inner_div = $('<div/>', { class: 'col-xs-8' }).appendTo('body') // change 'body' as needed
    .append($('<h3/>', { text: value.name }))
    .append($('<button/>', {
        type: "button",
        class: "btn btn-defaultl btn-sm",
        html: span1
    }))
    .append($('<button/>',{   
        type: "button",
        class: "btn btn-defaultl btn-sm",
        html: span2
    }));

如果您正在创建的HTML变得更复杂，我建议您使用模板插件。

将多个对象添加到自关闭div

3 个答案: