Fetch and append element at last using jQuery - javascript

I have a div parent element with class .carousel-inner. Within this parent div, there are some children elements. I want to take its 2nd (child) element and append that element at last. I am getting and appending second element like this.
var a = $(".carousel-inner").children()[1];
$(".carousel-inner").append(a);
Now as I append this element, it removes this element from second position and append at the last. I want to keep this element a the second position as well. How can I do it?


using clone() after you find the element. and make another variable
var a = $(".carousel-inner").children()[1],
b = $(a).clone();
$(".carousel-inner").append(b);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner">
<div class="child">
a
</div>
<div class="child">
this clones
</div>
<div class="child">
c
</div>
</div>
OR clone the element just before appending like so :
var a = $(".carousel-inner").children()[1]
$(a).clone().appendTo('.carousel-inner');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner">
<div class="child">
a
</div>
<div class="child">
this clones
</div>
<div class="child">
c
</div>
</div>


Use .clone()
$(a).clone().appendTo('.carousel-inner');


Use clone();
var a = $(".test").children()[1];
a = $(a).clone();
$(".carousel-inner").append(a);


Clone is the good way to achieve what you want :
var a = $(".carousel-inner").children().eq(1);
a.clone().appendTo('.carousel-inner');
you are receiving an error because $(".carousel-inner").children()[1] get the DOM object and $(".carousel-inner").children().eq(1) get the Jquery object
and clone is defined only on jquery object.


use clone function like beolw
$("p").clone().appendTo("body");


You Can Do this way also.
var a = $(".carousel-inner").children().eq(1).prop('outerHTML');
$(".carousel-inner").append(a);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner">
<div class"first-child">First</div>
<div class"second-child">Second</div>
<div class"third-child">Third</div>
<div class"fourth-child">Fourth</div>
</div>

Related

Appending Div Elements within a Cloned Object

I simply just want to add some data to the "employeeId" div element within a cloned object and can't figure out the proper syntax to do so.
Here is some of the layout of the original object:
<div id="container">
<div id="reimbursement">
<div class="row">
<div class="col">
Employee ID:
<div id="employeeId">
</div>
And here is the JavaScript that was used to create the clone:
let reimbursement = document.getElementById("reimbursement");
let reimbursementClone = reimbursement.cloneNode(true);
document.getElementById("container").appendChild(reimbursementClone);

Simply use querySelector to get the element from the new clone and add the relevant data to it:
let reimbursement = document.getElementById("reimbursement");
let reimbursementClone = reimbursement.cloneNode(true);
document.getElementById("container").appendChild(reimbursementClone);
reimbursementClone.querySelector("#employeeId").innerText = "something";
<div id="container">
<div id="reimbursement">
<div class="row">
<div class="col">
Employee ID:
<div id="employeeId">
</div>
</div>
</div>
</div>
Although the above code would work, your cloning causes multiple instances of the same id which is invalid. You should change the employeeId to a class and pass a class selector to reimbursementClone.querySelector.

How to get innerHTML of div, which contains a div?

I'm a wondering how I can get innerHTML of div when it contains a div element and a text. My code looks like this:
var outer = document.getElementById("outer").childNodes;
outer.forEach(function(e) {
console.log(e.innerHTML);
});
<div id="outer">
<div class="item">
<div class="icon"></div>
Hello
</div>
</div>
As you can see, innerHTML is getting the child div and the text, but I only want the text. Is it possible to make it without splitting or something?

I would put Hello in a separate container if you can.
var outer = document.getElementById("outer");
var firstItem = outer.children[0];
var text = firstItem.querySelector('.text').innerHTML;
console.log(text);
<div id="outer">
<div class="item">
<div class="icon"></div>
<span class="text">Hello</span>
</div>
</div>
That way you have more control over it if you want to add more content

Create clone of first two divs

I want to create clone of first two div of parent Div.
HTML Code
<div id="parent">
<div class="child"> <div class="child1>Content1...</div> </div>
<div class="child">Content2...</div>
<div class="child">Content3...</div>
<div class="child">Content4...</div>
<div class="child">Content5...</div>
<div class="child">Content6...</div>
</div>
Expected output
clone_object = '<div class="child"> <div class="child1>Content1...</div> </div>
<div class="child">Content2...</div>'
I tried below code but it will clone only first div of parent div.
clone_object = $("#parent").find("div:first").clone();
My question is how to clone first two div of parent div?

You need to use :lt selector.
Select all elements at an index less than index within the matched set.
$("#parent .child:lt(2)").clone();
or
$("#parent>div:lt(2)").clone();
Working Demo

Get sister element using jQuery

Is there a way to get a next element from a current sister element? Sorry if confusing.
<div class="wrapper">
<div class="paDiv">
<div class="saDivOne">
</div>
</div>
<div class="paDivTwo">
<div class="saDivTwo">
</div>
</div>
</div>
<script>
$('.paDiv').each(function(){
htmlContent = $(this).children().html();
SisterDivContent = $(this).next('.paDivTwo').children().html();
console.log(SisterDivContent);
})
</script>

$('.paDiv').each(function(){
var SisterDivContent = $(this).parent().find('.saDivTwo').html();
alert(SisterDivContent);
});
You have to add some contents inside div class 'saDivTwo'. Otherwise you will get empty content only.
Demo:
http://jsfiddle.net/U8n7g/

Try using .sibling:
$('.paDiv').sibling('paDivTwo').html()

Get elements just 1 level below the current element by javascript

I need to access the DOM tree and get the elements just 1 level below the current element.
Read the following code:
<div id="node">
<div id="a">
<div id="aa">
<div id="ab">
<div id="aba"></div>
</div>
</div>
</div>
<div id="b">
<div id="ba">
<div id="bb">
<div id="bba"></div>
</div>
</div>
</div>
<div id="c">
<div id="ca">
<div id="cb">
<div id="cba"></div>
</div>
</div>
</div>
</div>
I want to get the 3 elements "a", "b", "c" under "node". What should I do?
var nodes = node.getElementsByTagName("div") <---- I get all the divs but not the 3 divs I need.
var nodes = node.childNodes; <---- works in IE, but FF contains Text Node
Does anyone know how to solve the problem?

You could use a function that rules out all non-element nodes:
function getChildNodes(node) {
var children = new Array();
for(var child in node.childNodes) {
if(node.childNodes[child].nodeType == 1) {
children.push(child);
}
}
return children;
}

I'd highly recommend you look at JQuery. The task you're looking to do is straightforward in pure Javascript, but if you're doing any additional DOM traversal, JQuery is going to save you countless hours of frustration. Not only that but it works across all browsers and has a very good "document ready" method.
Your problem solved with JQuery looks like:
$(document).ready(function() {
var children = $("#node").children();
});
It looks for any element with an id of "node" then returns its children. In this case, children is a JQuery collection that can be iterated over using a for loop. Additionally you could iterate over them using the each() command.

This is simplier than you think:
var nodes = node.querySelector("node > div");

Try this (late answer, but can be useful for others):
var list;
list=document.getElementById("node").querySelectorAll("#node>div");

Universal selectors can do the trick:
var subNodes = document.querySelectorAll("#node > *");
Query parts:
#node is unique container selector
> next slector should be applied only on childs
* universal selector that match every tag but not text
Can I use universal selector

In my opinion the easiest way to do this is to add a class name to the
first level child nodes:
<div id="node">
<div id="a" class="level_1">
<div id="aa">
<div id="ab">
<div id="aba"></div>
</div>
</div>
</div>
<div id="b" class="level_1">
<div id="ba">
<div id="bb">
<div id="bba"></div>
</div>
</div>
</div>
<div id="c" class="level_1">
<div id="ca">
<div id="cb">
<div id="cba"></div>
</div>
</div>
</div>
</div>
and then to use the method getElementsByClassName, so in this case:
document.getElementById('node').getElementsByClassName('level_1');

I think node.childNodes is the right place to start. You could (to make it work with FF too), test the nodeName (and possibly nodeType) of all child nodes you get, to skip text nodes.
Also you might have a look at some javascript library like prototype, which provide a lot of useful functions.

I've added some text so we can see that it is working, and JavaScript that will add "added!" to the bottom of each of the divs at the base:
var cDiv = document.querySelectorAll('body > div > div'), i;
for (i = 0; i < cDiv.length; i++)
{
cDiv[i].appendChild(document.createTextNode('added!'));
}
<div id="node">
<div id="a">a
<div id="aa">aa
<div id="ab">ab
<div id="aba">aba</div>
</div>
</div>
</div>
<div id="b">b
<div id="ba">ba
<div id="bb">bb
<div id="bba">bba</div>
</div>
</div>
</div>
<div id="c">c
<div id="ca">ca
<div id="cb">cb
<div id="cba">cba</div>
</div>
</div>
</div>
</div>

Categories