Question

我的问题是我正在尝试在jQuery中动态创建两个按钮，但我永远无法让第二个按钮以我想要的方式显示 - 当我可以让它出现时。

我的目标是使用jQuery向页面添加两个按钮。该页面是我正在学习jQuery和Javascript的练习。由于赋值，我正在动态创建正文中的所有元素。

当我运行以下代码时，会创建“重置”按钮; “调整大小”按钮不是。 #container和其他<div>都是在没有发生事故的情况下生成的。

$(document).ready(function () {

    $("<button id='reset'>Reset</button>").appendTo('body');
    $("<button id='resize'>Resize</button").after('#reset');

    var container = $('<div id="container"></div>');
    $(container).appendTo('body');

    for (var i = 0; i < 16; i++) {
        $('<div class="bricks"></div>').appendTo('#container');
    }

    $('.bricks').hover(function () {
        $(this).css('background-color', 'blue');
    });

});

我为#container和.bricks指定了CSS规则，但没有为任何其他元素指定CSS规则。我的原始DOM只包含一个空的<body>标记。

我最初尝试对两个按钮使用.appendTo('body')，这导致第一个“重置”按钮按预期显示，并且在我想要显示“调整大小”按钮之后出现一个空按钮。

我已广泛搜索相关资料而没有结果，所以我希望这个查询不是多余的！

Answer 1

快速检查.after() docs告诉我你需要反转语法。来自文档：With .after(), the content to be inserted comes from the method's argument: $(target).after(contentToBeInserted)

试试这个：

 $("#reset").after('<button id='resize'>Resize</button>');

在jQuery中创建元素按钮，但不会出现第二个元素

1 个答案: