I would like to add another div within a div group on a button click in order to have a continuously generating slider. Like so:
<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 is:
$('.slick-next').click(function(){
$('"<div class="date-carousel-other slider"></div>"').append( ".carousel-items" );
});
The result is appending the boxes underneath my slider (big div) instead of inside the slider. Appending to ".slider" instead, duplicates all the div's and wedges boxes inside the slider.
Is my syntax off or am I using the wrong method?
As per Docs,
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.
So your solution failed because .append() expects the target as selector and content as argument in 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 same way,use .appendTo() instead of .append():
$('.slick-next').click(function(){
$('<div class="date-carousel-other slider"></div>').appendTo( ".carousel-items" );
});
Try with append()
$('.carousel-items').append("<div class='date-carousel-other slider'></div>");
or using .appendTo()
$('<div class="date-carousel-other slider"></div>').appendTo( ".carousel-items" );
You swapped it -
$(".carousel-items").append( "<div class='date-carousel-other slider'></div>" );
Or use appendTo -
$("<div class='date-carousel-other slider'></div>").appendTo( ".carousel-items" );
You have swapped the positions of "Selector" and "Content". You must use append() like below :
$('.slick-next').click(function(){
$(".carousel-items").append( '"<div class="date-carousel-other slider"></div>"' );
});
The append() method inserts specified content at the end of the selected elements.
Syntax:
$(selector).append(content,function(index,html))
You need to use appendTo() instead of append(), also remove unnecessary quotes ""
$('<div class="date-carousel-other slider"></div>').appendTo(".carousel-items" );
Related
I cloned a html element.
var $clone = $('.rules-if-field-container-'+if_counter).clone(true);
But now I want to append a div when the div is cloned.
I tried this:
$clone.append('<div class="append_or_'+inc_counter+'"> </div>').insertAfter('rules-if-field-container-'+inc_counter);
But doesn't give me the correct result.
It gives me this result:
<div class="box box-warning box-solid rules-if-field-container-1"><div class="append_or_1"> </div></div>
But it must be like this:
<div class="box box-warning box-solid rules-if-field-container-1"></div>
<div class="append_or_1"> </div>
How can I perform a insertAfter when I cloned an element?
In that case append() is not suitable for your needs, as it creates the content you specify as a child element of the target.
Instead you can first add the clone to the DOM, then use after() to add the second div. Try this:
$clone
.insertAfter('.rules-if-field-container-' + inc_counter)
.after('<div class="append_or_' + inc_counter + '"> </div>');
Also note that I would strongly suggest you don't use incremental class names. They quickly become a pain to maintain, and go completely against the point of classes, which is to allow grouping of related elements.
From jQuery docs.
The .append() method inserts the specified content as the last child
of each element in the jQuery collection (To insert it as the first
child, use .prepend()).
I think you need after instead.
Insert content, specified by the parameter, after each element in the set of matched elements.
<div id="#("Bottomgrid)" class="dgd2"></div>
var element = document.getElementById("#Bottomgrid");
element.empty();
$('.dgd2').empty()
Instead of deleting only Bottom grid its also removing other Div present in the screen.
jQuery .remove() will remove the set of matched elements from the DOM.
While jQuery .empty() will remove all child nodes of the set of matched elements from the DOM.
Considering if you have your HTML as below :
<div id="Bottomgrid" class="dgd2"></div>
and you want to remove div with id="Bottomgrid"
Then your javascript code will be :
$("#Bottomgrid").remove();
//This is not required as far as I see
//$('.dgd2').empty()
If you have a HTML structure like this:
<div class="holder">
<div id="item1">Hey</div>
</div>
you can simply just use this pure JavaScript code to remove the "item1" element:
var element = document.getElementById("item1");
element.parentNode.removeChild(element);
.empty() doesn't remove element it only removes elements children. use $('#Bottomgrid').remove()
Javascript :
document.getElementById("Bottomgrid").remove();
Jquery:
$( "#Bottomgrid" ).remove();
you should give the div name properly like Below how I am writing the Id. also you need to check properly which div you are going to delete. Because if a nested div present in your page and you are going to delete the div which is having all the child div inside that , then all respective div going to be deleted .
Html
<div id="bottomgridDiv" class="dgd2">
<div id="parentDiv" class="dgd2">
<div id="childDiv" class="dgd2">
</div>
</div>
</div>
Javascript
var element = document.getElementById("#bottomgridDiv");
In JQuery:-
$("#bottomgridDiv").remove();
So now if you wants to delete the bottomgridDiv then what ever the div present inside this is going to delete.
I want to use jQuery to manipulate a cloned element that is not on the DOM, to perform actions like .remove() on it. Say I have the following code:
var div= $('<div> <div id="div1"></div> </div>');
div.remove('#div1');
console.log(div.html());
The result on the console will still show that the element was not removed. string manipulation is not desirable, I'm looking for something analogue to $().remove()
The div variable will contain a reference to the outer div. You need to use find() to get the inner div by its id:
var $div = $('<div><div id="div1"></div></div>');
$div.find('#div1').remove();
Using the context argument of the jQuery() function:
$('div', div).remove('#div1');
I want to prepend a Font Element in HTML within a DIV. There will be multiple div within the same page with unique Id.
<div id="id-unknown">
"Some Text"
<font color="red">*</font>
</div>
To
<div id="id-unknown">
<font color="red">*</font>
"Some Text"
</div>
I used this Jquery code to achieve it but it gets all the fonts and prepend to every div element
$("font").prependTo($("font").parent());
http://jsfiddle.net/s4Ehw/
If you only want to do this for specific divs, just add the ID selector and use .each to obtain a reference to the specific element (this)
$('#id1, #id2, #id3').children('font').each(function() {
$(this).prependTo(this.parentNode);
});
If it so happens that every font tag needs this change, use the same .each construct as above but use $('font'), per your original code and Si Donaldson's answer.
For extra performance, replace the function body with:
var parent = this.parentNode;
parent.insertBefore(this, parent.firstChild);
i.e. replacing the jQuery calls with direct DOM manipulation.
You need to itterate through each one first using $.each and then you can work on each one individually!
http://jsfiddle.net/sidonaldson/s4Ehw/2/
$("font").each(function(){
$(this).prependTo($(this).parent());
});
use jQuery each function for manage elements in cycle
jsfiddle.net/s4Ehw/6/
$("font").each(function(){
$(this).prependTo($(this).parent());
})
$.each($("font"), function(index, element) {
console.log($(element));
$(element).prependTo($(element).parent());
});
I would like to convert
<div id="outer">
<div id="inner"></div>
</div>
into
<div id="outer">
<div id="middle">
<div id="inner"></div>
</div>
</div>
I would like to preserve any references to the divs that may have been set prior to this so just doing $("#outer").html($("" + $("#outer").html() + "")) will not work for me. Is there a better way than just creating the middle div, moving all the children of outer to it and then appending it to the outer div?
Use .wrap()...
$('#inner').wrap('<div id="middle"></div>');
DEMO: http://jsfiddle.net/ENmDF/
You should note that although jQuery makes it look like you're working with HTML since it accepts a string like '<div id="middle"></div>' to create an element, the truth is that it takes your string, uses it to create DOM elements, then inserts it into the DOM, placing it, and the wrapped part, in their respective places.
It would be similar to this in the DOM API...
var inner = document.getElementById('inner');
var middle = document.createElement('div');
middle.id = 'middle';
inner.parentNode.insertBefore(middle, inner);
middle.appendChild(inner);
DEMO: http://jsfiddle.net/ENmDF/1/
jQuery has another syntax for creating elements with attributes. That is to pass an object as the second argument to the $ function, so the original code could be written like this...
$('#inner').wrap($('<div>', {id:"middle"}));
DEMO: http://jsfiddle.net/ENmDF/3/
$("#inner")
.wrap(
$("<div>")
.prop("id", "middle")
);
Works the same way as am not i am's answer, but this one uses the DOM to create the div element that wraps it.
Note the lack of a semicolon (;) after setting the id attribute.
Demo.
Also, in case you prefer it, here's a one-liner:
$("#inner").wrap($("<div>").attr("id","middle"));