Div自动关闭生成

时间:2015-03-10 02:54:58

标签: javascript jquery html dom append

我的div生成有问题,因为我生成了一个表单,我想将它们包装在具有相同id的div中。但是当我检查元素时,它会在表单之前自动关闭。所以它并没有像它一样包围它,只是在表格上方<div></div>

var startDiv = "<div id='appm'>";
var endDiv = "</div>";

for(var i = 0; i < values.length; i = i + 8){   

    $('#youEvents').append(     

        $('<form />', { id: values[i], method: 'POST' }).append(
            startDiv, // Starting div id=appm
            $('<textarea />', { id: "teast", name: 'routename', placeholder: 'Name', value: values[i], type: 'text' }),
            $('<br />'),
            $('<input />', { id: 'rname', name: 'routename', placeholder: 'Name', value: values[i + 1], type: 'text' }),
            $('<br />'),
            $('<input />', { id: 'rname', name: 'routename', placeholder: 'Name', value: values[i + 2], type: 'text' }),
            $('<br />'),
            $('<input />', { id: 'rname', name: "ee", placeholder: 'Name', value: values[i + 3], type: 'text' }),
            $('<br />'),
            $('<input />', { id: 'rname', name: 'routename', placeholder1: 'Name', value: values[i + 4], type: 'text' }),
            $('<br />'),
            $('<input />', { id: 'rname', name: 'routename', placeholder: 'Name', value: values[i + 5], type: 'text' }),
            $('<br />'),
            $('<input />', { id: 'address', id: 'rdescription', name: 'heya', value: values[i + 6], type: 'text' }),
            $('<br />'),
            $('<input />', { id: 'adress', name: 'routetags', placeholder: 'tags', value: values[i + 7], type: 'text' }),
            $('<br />'),                                    
            $('<input />', { id: values[i], type: 'button', value: 'Submit',  click: function(){
                // attaching the function to the button
                testAjax(this.id);  // Calling the function below.                                                  
            }}),
            endDiv // Ending the div         
        )
    );
}

1 个答案:

答案 0 :(得分:2)

这是因为jQuery 在追加div时创建 HTML元素<div id='appm'>,并且包含结束标记。因此,例如,符号$('<form />')$('<form>')的结果相同。

要实现您想要的目标,您可以通过利用另一个嵌套.append来完成您已经在做的事情:

$('<form>', { id: values[i], method: 'POST' }).append(
    $('<div>', { id: 'appm' }).append(
        $('<textarea>', { id: "teast", name: 'routename', placeholder: 'Name', value: values[i], type: 'text' }),
        $('<br>'),
        // [...] 
        $('<br>'),                                    
        $('<input>', { id: values[i], type: 'button', value: 'Submit',  click: function(){ testAjax(this.id); } })
    )
)