在另一个 div 中附加一个 HTML div

Question

我想在单击按钮时在 div 组中添加另一个 div，以便连续生成滑块。像这样：

<div class="carousel-items">
    <div class="date-carousel-other slider"></div>
    <div class="date-carousel-other slider"></div>
    <div class="date-carousel-other slider"></div><!-- new div -->
</div>

目前我的 java 脚本是：

$('.slick-next').click(function(){
    $('"<div class="date-carousel-other slider"></div>"').append( ".carousel-items" );
});

结果是在我的滑块（大div）下方而不是在滑块内附加框。相反，附加到 ".slider"，复制滑块内的所有 div 和楔形框。

是我的语法错误还是我使用了错误的方法？

Answer 1

根据文档，

The .append() and .appendTo() methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With .append(), the selector expression preceding the method is the container into which the content is inserted. With .appendTo(), on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container.

所以您的解决方案失败了，因为 .append() 期望目标作为选择器，内容作为方法 .append() 中的参数。像这样，

$('.slick-next').click(function(){
  $(".carousel-items").append('<div class="date-carousel-other slider"></div>' );
});

如果你想以相同的方式保持目标和内容，请使用 .appendTo() 而不是 .append():

$('.slick-next').click(function(){
 $('<div class="date-carousel-other slider"></div>').appendTo( ".carousel-items" );
});

Answer 2

您需要使用 appendTo() 而不是 append()，同时删除不必要的引号 ""

$('<div class="date-carousel-other slider"></div>').appendTo(".carousel-items" );

Answer 3

尝试使用 append()

$('.carousel-items').append("<div class='date-carousel-other slider'></div>");

或使用 .appendTo()

$('<div class="date-carousel-other slider"></div>').appendTo( ".carousel-items" );

Answer 4

您已经调换了 "Selector" 和 "Content" 的位置。您必须像下面这样使用 append() :

$('.slick-next').click(function(){
    $(".carousel-items").append( '"<div class="date-carousel-other slider"></div>"' );
});

append()方法在被选元素末尾插入指定内容。

语法：

$(selector).append(content,function(index,html))

Answer 5

你换了它 -

$(".carousel-items").append( "<div class='date-carousel-other slider'></div>" );

或使用appendTo -

$("<div class='date-carousel-other slider'></div>").appendTo( ".carousel-items" );

在另一个 div 中附加一个 HTML div

Appending an HTML div inside another div

html

javascript

css

jquery

slider