Adding HTML div inside another div
I would like to add another div to the div group on a button click to have a continuous slider. For example:
<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>
Currently my java script:
$('.slick-next').click(function(){
$('"<div class="date-carousel-other slider"></div>"').append( ".carousel-items" );
});
As a result, margins are added under my slider (big div), not inside the slider. Adding instead ".slider"
, duplicates all divs and gussets inside the slider.
Is my syntax disabled or am I using the wrong method?
source to share
According to Documents
The .append () and .appendTo () methods accomplish the same task. The main difference lies in the syntax - in particular, when placing content and purpose. 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 selection expression or on-the-fly markup, and is inserted into the target container.
So, your solution failed because it .append()
expects the target to be selected as a selector and content as an argument in the method .append()
. Like this,
$('.slick-next').click(function(){
$(".carousel-items").append('<div class="date-carousel-other slider"></div>' );
});
if you want to keep the target and content in the same way use .appendTo()
instead .append()
:
$('.slick-next').click(function(){
$('<div class="date-carousel-other slider"></div>').appendTo( ".carousel-items" );
});
source to share
You need to use appendTo()
instead append()
, also remove unnecessary quotes""
$('<div class="date-carousel-other slider"></div>').appendTo(".carousel-items" );
source to share
You have changed the positions "Selector" and "Content". You should use append()
as below:
$('.slick-next').click(function(){
$(".carousel-items").append( '"<div class="date-carousel-other slider"></div>"' );
});
The append () method inserts the specified content at the end of the selected elements.
Syntax:
$(selector).append(content,function(index,html))
source to share