Question

此代码：

$("div.content form#registration").append('<div class="submit-area">');
    $("div.content form#registration").append('<input type="submit" class="btn btn-primary" id="previoyus" value="« Previous">');
    $("div.content form#registration").append('<input type="submit" class="btn btn-primary" id="next" value="Next »">');
$("div.content form#registration").append('</div');

产生这个：

<div class="submit-area"></div>
<input type="submit" class="btn btn-primary" id="previoyus" value="« Previous">
<input type="submit" class="btn btn-primary" id="next" value="Next »">

而不是：

<div class="submit-area">
    <input type="submit" class="btn btn-primary" id="previoyus" value="« Previous">
    <input type="submit" class="btn btn-primary" id="next" value="Next »">
</div>

如何使用submit-area类中的输入元素实现后者？

Answer 1

试试这个：

$('<div class="submit-area">')
    .append('<input type="submit" class="btn btn-primary" id="previoyus" value="« Previous">')
    .append('<input type="submit" class="btn btn-primary" id="next" value="Next »">')
    .appendTo("div.content form#registration")

您基本上创建div元素，添加输入元素，然后将其附加到div.content form#registration（可能写为#registration BTW）。

JSFiddle：http://jsfiddle.net/pRD55/

Answer 2

您正在追加并附加到相同的元素。您可以采用以下两种方式：

$("div.content form#registration").append('<div class="submit-area">\
    <input type="submit" class="btn btn-primary" id="previoyus" value="« Previous">\
    <input type="submit" class="btn btn-primary" id="next" value="Next »">\
</div');

第一个是仅添加一大块html。

$("div.content form#registration").append('<div class="submit-area">');
$("div.content form#registration .submit-area").append('<input type="submit" class="btn btn-primary" id="previoyus" value="« Previous">');
$("div.content form#registration .submit-area").append('<input type="submit" class="btn btn-primary" id="next" value="Next »">');

第二个附加到第一个附加框并执行相同的操作。

Answer 3

这种行为完全没问题。您尝试将多个元素附加到单个元素中。因此，它们都会一个接一个地附加（而不是彼此内部）。

尝试将其更改为：

$("div.content").append('<div class="submit-area"></div>');
$("div.submit-area").append('<input type="submit" class="btn btn-primary" id="previoyus" value="« Previous">');
$("div.submit-area").append('<input type="submit" class="btn btn-primary" id="next" value="Next »">');

另请注意，我已删除了append </div，因为 1）它缺少>，而 2）< / em>它是不必要的，因为一旦第二次附加发生，div就会被关闭。

Answer 4

尝试使用此语法。您必须明白.append()并不是简单地在HTML中添加行，而是将元素插入其他内容。

var myNewDiv = $('<div class="submit-area">');
myNewDiv .append('<input type="submit" class="btn btn-primary" id="previoyus" value="« Previous">');
myNewDiv .append('<input type="submit" class="btn btn-primary" id="next" value="Next »">');
$("div.content form#registration").append(myNewDiv);

Answer 5

两个问题。

1）你最后没有关闭div“

2）这实际上不是一种有效的方法。将所有HTML放入变量并一次追加所有内容。 JQuery只需要编辑一次DOM，而不是四次查询和编辑。

var html = '<div class="submit-area"><input type="submit" class="btn btn-primary" id="previoyus" value="« Previous"><input type="submit" class="btn btn-primary" id="next" value="Next »"></div>';

$("div.content form#registration").append(html);

Answer 6

为什么不呢：

var my_html = '<div class="submit-area">';
my_html    += '<input type="submit" class="btn btn-primary" id="previoyus" value="« Previous">';
my_html    += '<input type="submit" class="btn btn-primary" id="next" value="Next »">';
my_html    += '</div>';

$(my_html).appendTo("div.content form#registration");

PS。你错过了“＆gt;”最后一个div标签的结尾..

Answer 7

当您附加div时，jquery会自动为您关闭它，.append('</div');将被忽略，顺便说一下，你错过了>。

生成所需代码的方法是执行此操作

$("<div class='submit-area'>")
    .append(
        $('<input type="submit" class="btn btn-primary" id="previoyus" value="« Previous">'),
        $('<input type="submit" class="btn btn-primary" id="previoyus" value="« Previous">')
    )
.appendTo("#registration");

注意我从选择器中移除了div.content，因为您不需要通过id

定位表单

另请注意append可以将多个元素作为参数，因此不必调用它两次。

http://jsfiddle.net/67aYC/1/

.append（）没有在jQuery中正确地注入内容

7 个答案: