JS过早地关闭标签

Car*_* M. 1 javascript jquery html5 css3

这实际上是我在这个令人敬畏的网站上的第一个问题.我经常通过一些研究找到我需要的答案,但这次并非如此,因此我不得不问.

这是发生的事情:

我正在构建一个最初有一个下拉列表,一个字段和一个按钮的搜索表单.人们从下拉列表中选择要执行搜索的字段(field1,field2等),然后在文本框中键入条件.然后有一个"OR"按钮,当它被点击时,它动态地创建另一个像之前的那个(下拉,文本框和"或"按钮),以创建搜索的第二个条件.

以下是插入按钮的代码的重要部分:

var divid = '#orbuttondiv'+divid;
    $(divid).after('<div id="field'+orbuttonid+'" class="blockSrc"><select name="orfield[]" id="condition'+orbuttonid+'field" class="blockSrc'+orbuttonid+'"><option value="0">Select Field</option><?php //function ?></select><input name="orstr[]" id="condition'+orbuttonid+'str" type="text" /></div><div class="orbutton" id="orbuttondiv'+orbuttonid+'"><button name="orbutton'+orbuttonid+'" id="orbutton'+orbuttonid+'" class="btn orbt" type="button" value="OR" /><i class="icon-comments-alt"></i> OR</button></div>');             
});
Run Code Online (Sandbox Code Playgroud)

所以问题在于,当文档中插入集合时,除了按钮标记过早关闭外,一切都能正常工作.我的期望是:

<div class="orbutton" id="orbuttondiv1">
<button class="btn orbt" value="OR" name="orbutton1" id="orbutton1" type="button"><i class="icon-comments-alt"></i> OR</button>
</div>
Run Code Online (Sandbox Code Playgroud)

而我得到的是:

<div class="orbutton" id="orbuttondiv1">
<button class="btn orbt" value="OR" name="orbutton1" id="orbutton1" type="button"></button><i class="icon-comments-alt"></i> OR
</div>
Run Code Online (Sandbox Code Playgroud)

注意<button>标签在内容之前是如何关闭的,因此<i>和单词"OR"被加载到按钮之外.

任何帮助将不胜感激:

Cᴏʀ*_*ᴏʀʏ 5

因为你自动关闭了<button>标签:

 <button ... value="OR" /><i>...
                        ?
Run Code Online (Sandbox Code Playgroud)

只需拿出斜线就可以了.