I have a HTML string that I convert to a JQuery node set:
var html = "<div id='foo'><div id='bar'></div></div>";
var nodes = $(html);
I want to add the content <div id="baz"></div> immediately after <div id='bar'></div>. I tried using:
nodes.find('#bar').prepend('<div id="baz"></div>');
But this yields the result:
<div id="foo">
<div id="bar">
<div id="baz"></div>
</div>
</div
But what I want is:
<div id="foo">
<div id="bar"></div>
<div id="baz"></div>
</div>
nodes.append('<div id="baz"></div>');
or...
$('<div>',{id:"baz"}).appendTo(nodes);
Try after
nodes.find('#bar').after('<div id="baz"></div>');
Here is the sample : http://jsfiddle.net/UCghk/3/
Related
I am trying to detach the div from the relevant parent and then append to the same parent div.
//Jquery Code
jQuery(function(){
moveColorDots();
});
function moveColorDots(){
var copyDivData = jQuery('.variations_form.wvs-archive-variation-wrapper').detach();
copyDivData.appendTo('.product-variations');
}
<div class="pp-content-post">
<div class="variations_form wvs-archive-variation-wrapper">
some data here
</div>
<div class="product-box">
<div class="glasses-sec">
<h3>title</h3>
</div>
<div class="product-variations"></div>
</div>
</div>
Expected result.
But after running the above code I am getting the following result.
.detach Description: Remove the set of matched elements from the DOM.
That means you append all the detached elements to every product-variations element ..So
You need to loop through the variations_form.wvs-archive-variation-wrapper elements by using .each()
Also you can use .appendTo() directly
//Jquery Code
jQuery(function(){
moveColorDots();
});
function moveColorDots(){
jQuery('.variations_form.wvs-archive-variation-wrapper').each(function(){
var product_variations = jQuery(this).next('div').find('.product-variations');
jQuery(this).appendTo(product_variations);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pp-content-post">
<div class="variations_form wvs-archive-variation-wrapper">
some data here 1
</div>
<div class="product-box">
<div class="glasses-sec">
<h3>title</h3>
</div>
<div class="product-variations"></div>
</div>
</div>
<div class="pp-content-post">
<div class="variations_form wvs-archive-variation-wrapper">
some data here 2
</div>
<div class="product-box">
<div class="glasses-sec">
<h3>title</h3>
</div>
<div class="product-variations"></div>
</div>
</div>
Note: This line of code var product_variations = jQuery(this).next('div').find('.product-variations'); is depending on your html structure it works for the posted html here .. But if you've another html structure you need to modify it to catch the desired element
Here's my code:
<div id='layer1'>
<div id='a'>
<div id='b'>
<div id='layer2'>
<div id='a'>
<div id='b'>
<div id='layer3'>
<div id='a'>
<div id='b'>
I want to try to get the element [a] of layer1.
Could I do this using pure javascript and withOUT jquery and other stuff?
An ID uniquely identifies one single element on the page. The behavior you described is more like "a class" inside of an ID:
document.querySelector("#counter-for-drinks .up-arrow")
and so if you want a different up-arrow, it is:
document.querySelector("#counter-for-burgers .up-arrow")
document.querySelector() is what is similar to jQuery $(" "). It also has the form document.querySelectorAll() for getting all matched elements.
Your HTML is missing closing tags. You can always validate your code here.
Also, you should use class instead of id.
<div id='layer1'>
<div class='a'></div>
<div class='b'></div>
</div>
<div id='layer2'>
<div class='a'></div>
<div class='b'></div>
</div>
<div id='layer3'>
<div class='a'></div>
<div class='b'></div>
</div>
You can use javascript to get elements:
document.querySelector("#layer1 .a")
var firstA = document.querySelectorAll('#layer1 #a');
var nodeString = '';
if (firstA.length > 0) {
for (var i = 0; i < firstA.length; i++) {
nodeString = nodeString + firstA[i].innerText + '<br/>';
}
}
document.getElementById('founded-nodes').innerHTML = nodeString;
#founded-nodes {
color: brown;
}
<div id='layer1'>
<div id='a'>layer1 aaa</div>
<div id='b'>layer1 bbb</div>
</div>
<div id='layer2'>
<div id='a'>layer2 aaa</div>
<div id='b'>layer2 bbb</div>
</div>
<div id='layer3'>
<div id='a'>layer3 aaa</div>
<div id='b'>layer3 bbb</div>
</div>
<div id="founded-nodes"></div>
As all said in above over comments and answers, one must use a single id on the same page, or else the use of classes is a must. But if you want to achieve this, you can have a look at code.
{"__reactInternalInstance$scd8ef5s9":{"tag":5,"key":null,"elementType":"div","type":"div","stateNode":"~","return":{"tag":5,"key":null,"elementType":"div","type":"div","stateNode":{"__reactInternalInstance$scd8ef5s9":"~__reactInternalInstance$scd8ef5s9~return","__reactEventHandlers$scd8ef5s9":{"id":0,"style":{"position":"absolute","zIndex":0,"display":"flex","justifyContent":"center","alignItems":"center","width":100,"height":100,"backgroundColor":"white"},"className":"box resizable","children":[{"type":"div","key":null,"ref":null,"props": "props..." ......
console.log(CircularJSON.stringify($(this).find("div")[0]));
Prints it.
Here is the html:
<div
className="myClass"
>
<div
className="resizerClass"
id="tomatoes"
>
<div className="resizers">
</div>
</div>
<div className="resizers"></div>
</div>
I need the id os resizerClass div? how to get it?
If you want to find ID by jQuery as your HTML attributes(className) then you can define attribute in square bracket like $('[className="resizerClass"]') and get other attributes value like attr('id').
$(document).ready(function(){
var getId = $('[className="resizerClass"]').attr('id');
console.log('id='+getId);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div className="myClass">
<div className="resizerClass" id="tomatoes">
<div className="resizers"></div>
</div>
<div className="resizers"></div>
</div>
I want to show all the nodes of my html page inside a div.
What i have so far (js):
var nodes = document.getElementsByTagName("*");
div3.innerHTML = nodes;
And html:
<body>
<div id="content">
<div id="1-1">
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div><br>
<div id="div4"></div><br>
<div id="div5"></div>
</div>
</div>
<script src="script201.js" rel="text/javascript"></script>
</body>
The output I get from this code in div3: [object HTMLCollection]
How do I get all the nodes to show like:
BODY
DIV
DIV
DIV
DIV
DIV
DIV
DIV
SCRIPT
So every node in the file basically
You have to loop through all the nodes so that you get the nodeName property individually.
Please Note: Since document object has some other tags like HTML, HEAD, STLYLE, SCRIPT etc., all of them will be targeted with * selector.
var nodes = [...document.getElementsByTagName("*")];
nodes.forEach(function(el){
div3.innerHTML += el.nodeName + ' ';
})
<body>
<div id="content">
<div id="1-1">
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div><br>
<div id="div4"></div><br>
<div id="div5"></div>
</div>
</div>
<script src="script201.js" rel="text/javascript"></script>
</body>
You can use JavaScript querySelectorAll method, which is used to select all the nodes based on the parameter we passed. for example if we pass * inside document.querySelectorAll('*'), it selects all the node in the document. "*" is the universal selector.
var allNode=document.querySelectorAll('*')
console.log(allNode)
<body>
<div id="content">
<div>
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div><br>
<div id="div4"></div><br>
<div id="div5"></div>
</div>
</div>
<script src="script201.js" rel="text/javascript"></script>
</body>
Use element_name.querySelectorAll('*') to get all elements inside it.
var b=document.getElementById('div3')
document.querySelectorAll('*').forEach(e=>b.innerHTML+=e.nodeName + "<br>")
<body>
<div id="content">
<div id="1-1">
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div><br>
<div id="div4"></div><br>
<div id="div5"></div>
</div>
</div>
<script src="script201.js" rel="text/javascript"></script>
</body>
I'm loading some information from a page. I want to move some of the content around and then load it up to a div in the corrected order. Here's what I mean. Imagine this is the content on the page being called:
<div class="wrapper">
<div class="product">some text
<div class="item" id="234"></div>
<div class="description>More text</div>
</div>
<div class="product">some text
<div class="item" id="3343"></div>
<div class="description">More text</div>
</div>
</div>
These are just showing two products, but imagine it's 30 or so products. Now when I load the page using an ajax call, I want to re-arrange some of the content before I place it in a div. My new content should look like this:
<div class="wrapper">
<div class="product">some text
<div class="description>More text
<div class="item" id="234"></div>
</div>
</div>
<div class="product">some text
<div class="description">More text
<div class="item" id="3343"></div>
</div>
</div>
</div>
So I took the "item" class and moved it into the description class. How do I accomplish this for all the products? It would look something like this I suppose:
$.get('/product-page',function(data){
$('#container').html($(data).MOVE-STUFF-AROUND);
});
Given this HTMl:
<div class="wrapper">
<div class="product">some text
<div class="item" id="1111"></div>
<div class="description">More text</div>
</div>
<div class="product">some text
<div class="item" id="2222"></div>
<div class="description">More text</div>
</div>
</div>
Running this JQuery code:
$(".product").each(function(i, obj) {
let $prodcut = $(this);
let $item = $prodcut.children(".item");
let $desc = $prodcut.children(".description");
$item.appendTo($desc);
});
Will give you this output:
<div class="wrapper">
<div class="product">some text
<div class="description">More text
<div class="item" id="1111"></div>
</div>
</div>
<div class="product">some text
<div class="description">More text
<div class="item" id="2222"></div>
</div>
</div>
</div>
The way it works: I select all prodcuts divs. I loop into each one and select the div labled "item" and then I move that div and append it into a div labled "description". Both item and description are children of product.
DEMO:
$(".product").each(function(i, obj) {
let $prodcut = $(this);
let $item = $prodcut.children(".item");
let $desc = $prodcut.children(".description");
$item.appendTo($desc);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<div class="wrapper">
<div class="product">some text
<div class="item" id="1111"></div>
<div class="description">More text</div>
</div>
<div class="product">some text
<div class="item" id="2222"></div>
<div class="description">More text</div>
</div>
</div>
Hard to tell from what is shown what you actually get as response. Assuming it is the full wrapper do:
$.get('/product-page',function(data){
var $data = $(data);
$data.find('.description').append(function() {
return $(this).prev('.item');
});
$('#container').html($data);
});
DEMO
I presume /product-page returns HTML since you suggest displaying it using $('#container').html(data);. If so, you can arrange your HTML in the backend script (product-page) so when you call it on AJAX, the HTML data is ready.
Or, you can opt /product-page to return JSON data, then arrange it in your JS code, e.g.:
$.get('/product-page', function(data) {
$('.wrapper').html(''); // assuming you want to clear contents of .wrapper
$.each(data, function (v) {
var html = '<div class="product>"' + v.some_text;
html += '<div class="description"'> + v.more_text;
html += '<div class="item">' + v.item_details + '</div>';
html += '</div>';
html += '</div>';
$('.wrapper').append(html);
});
});
EDIT:
Comments were already added before I could submit my answer, and realized above won't answer the OP, as AJAX endpoint comes from third party.
If the data comes from a third party, you need to create a DOM manipulator function based on your needs. Sadly, the construct depends on your needs.