2015-08-28 70 views
1

我的问题是,我试图在jQuery中动态创建两个按钮,但我永远不会得到第二个按钮以我想要的方式出现 - 何时我可以让它出现。在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'); 
    }); 

}); 

我指定CSS规则的#container.bricks但不能用于任何其他元素。我原来的DOM只包含一个空的<body>标签。

我最初试图使用.appendTo('body')这两个按钮,导致第一个“重置”按钮显示为预期,在我想要显示“调整大小”按钮的地方出现一个空按钮。

我已经广泛搜索相关材料而没有结果,所以我希望这个查询不是多余的!

+2

你错过了就关门复位'button'标记的结束胡萝卜。 – ExcellentSP

回答

2

.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>'); 
相关问题