We Keep Coding

How to add all selected elements into an array and iterate through it?

Suppose I have the elements below
-- a. I want to add the 3 div block of parent_1 into an array.
-- b. Then loop through the array and add each div block (individually) into parent_2.
I want to do these with pure JavaScript. Is it possible?
Thank you.
<div class="parent_1">
<div></div>
<div></div>
<div></div>
</div>
<div class="parent_2">
<!-- add here -->
</div>

You can do this using querySelectorAll with selector .parent_1 > div to get all direct div inside .parent_1 then use forEach and cloneNode to add them to .parent_2.
Demo:
var divs = document.querySelectorAll('.parent_1 > div');
var parent_2 = document.querySelector('.parent_2');
divs.forEach((div) => {
parent_2.appendChild(div.cloneNode(true));
})
<div class="parent_1">
<div>
<div></div>
</div>
<div></div>
<div></div>
</div>
<div class="parent_2">
<!-- add here -->
</div>
Note that if you use .parent_1 div with the html above, you will get 4 div in .parent_2.

You can do that in following steps:
First use querySelectorAll() to get all the <div> elements in parent_1
Then select the parent_2 using querySelector()
Loop through the div using forEach()
clone each div using cloneNode() and add it to parent_2 using appendChild()
let elms= document.querySelectorAll('.parent_1 div');
let parent2 = document.querySelector('.parent_2');
elms.forEach(x => {
parent2.appendChild(x.cloneNode(true));
})
<div class="parent_1">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<div class="parent_2">
<!-- add here -->
</div>

Try this way using querySelectorAll and cloneNode
(function() {
let nodes = document.querySelectorAll('.parent_1 div');
let dest = document.getElementById('parent_2');
nodes.forEach(e => {
let clone = e.cloneNode(true);
dest.appendChild(clone);
});
})();
.parent_1 {
background: red;
}
.parent_2 {
background: green;
}
<div class="parent_1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="parent_2" id="parent_2">
<!-- add here -->
</div>

Using JQuery:
<script>
$(function() {
$('.parent_1').children().each(function() {
$(this).appendTo('.parent_2');
});
});
</script>

two division put the details in inner div using jquery

i have 2 divisoin
<div id="details">
<div id="feature">
</div>
</div>
I need to put the content using $("#details").html(content); (it is working correctly) like that way i need to put the content inside feature div i am using following way:
$("#details #feature").html(content);
but it is not working..how to solve?

When you use $("#details").html(content); you override the content of the div. So you're inner div with the id feature gets removed. Maybe you use $("#details").prepend(content); or you add another div for the main content and replace that content.
Look here is an example:
https://jsfiddle.net/morrisjdev/s9u7rfcu/

ID is a unique attribute so you can directly use id like below.
$(function() {
var content = "Some text here";
$('#feature').html(content);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
<div id="feature">
</div>
</div>
OR
$(function() {
var content = "Some text here";
$('#details').find('#feature').html(content);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
<div id="feature">
</div>
</div>

$(document).ready(function(){
var htmldetail ="Hello! I am Here";
var details = $("#details").html(htmldetail);
$("#userfeature").html(details);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="details">
<div id="userfeature">
</div>
</div>

The second is #feature and not #userfeature. And also add the jQuery Library as well. You can replace test with content variable.
$("#feature").html("test");
<div id="details">
<div id="feature">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
And also remember Id is unique and hence no need to mention its parent.
Run the following snippet and you can get the output.

Simple way..Go Through this
HTML
<div id="details">
<div id="feature">
</div>
</div>
JQUERY
$(document).ready(function()
{
var content="contain sample data";
// $("#details").html(content); if you wrote like this,
this will replace all content, so the inner div will be replaced
$("#details").append(content); // outer div
$("#feature").html(content);
});

Or you can use css-like selector method:
$(document).ready(function() {
$('#details > #feature').html('Hello <strong>World!!!</strong>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
<div id="feature">
</div>
</div>

I have created a plunk for it and it is working.
Try including the action inside
$( document ).ready(function() {
console.log( "ready!" );
var content = 'Hey there';
$("#details #feature").html(content);
});
Plunk :- http://plnkr.co/edit/63GsIoGmprnKs7oe77cF?p=preview

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()

Wrap a link which is in a specific div

I want to wrap a link which is in a div:
This :
<div id="hello">
http://google.fr/646564897564/8977748946
</div>
will be:
<div id="hello">
<div id="wrap">
http://google.fr/646564897564/8977748946
</div>
</div>

have a look here: http://jsfiddle.net/R44pn/
JS
var outer = document.getElementById("hello");
outer.innerHTML = "<div id='wrap'>"+outer.innerHTML+"</div>"
OUTPUT
<div id="hello">
<div id="wrap">
http://google.fr/646564897564/8977748946
</div>
</div>
with JQuery
$("#hello").html("<div id='wrap'>"+$("#hello").html()+"</div>")
fiddle here: http://jsfiddle.net/q27Sw/
hope it helps

Making use of jQuery you can use the wrapInner function:
var outer = $("#hello");
outer.wrapInner('<div id="wrap">);
http://jsfiddle.net/R44pn/6/

how i can duplicate div when click in link by javascript

hello all i`m good php developer not learn js yet..... my problem is
i have div
<div id="test1">
</div>
add div
i want when click in add div link, dublicte div and change number in id to be test2 , test3, unlimited
like the example
<div id="test1">
</div>
<div id="test2">
</div>
<div id="test3">
</div>

If you use jQuery this can easily be accomplished with the following:
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#div-creator').click(function(){
var numberOfDivs = $('.testClass').length;
$('<div id="test' + numberOfDivs + '" class="testClass">hi</div>').appendTo('body');
});
});
</script>
</head>
<body>
<div id="test1" class="testClass"></div>
Add Div
</body>
</html>
Demo can be found here: http://jsfiddle.net/4eDkJ/1/

Get the original div with document.getElementById()
Then create a new div with document.createElement('div')
Then loop on all the attributes for the first div, setting each one on the second div. Put in a case for element.getAttribute('id') and increment the number before you set it
When your new div is done, do originaldiv.parentNode.appendChild(newdiv)