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>
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
{"__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>
Here i have HTML structure and the same structure may repeat number of times with the same class names. what i'm trying to do is once i click on the .innerDiv i should be able to access the attr value of the .inid close to its parent element.
here is what i have tried, but its not working. i also tried adding the classname to the element i'm trying to get the value from. but its adding the class to all the element with .inid. how can i do this?
HTML
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv>
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv>
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
Jquery
$(this).on('click',function(){
$('.innerDiv').parents().find('.inid').addClass('testclass');
$('.innerDiv').parents().find('.inid').attr(data-attr);
});
To achieve expected result, use index of innerDiv and add class-testclass to element with class- inid
Find index of clicked innerDiv using index('.innerDiv)
Use that index to add class using eq
Add some sample css to testclass for testing
Syntax error in your code - closing quotes missing for class- second-most-innerdiv
Codepen - https://codepen.io/nagasai/pen/
working example
$('.innerDiv').on('click',function(){
$('.inid').eq($(this).index('.innerDiv')).addClass('testclass');
console.log($('.inid').eq($(this).index('.innerDiv')).attr('data-attr'))
});
.testclass{
background: red;
height: 10px;
width:10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv">
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv>
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
Using JQuery closest() feature to find the parent div, then find the element with class "inid" within that parent element and get the value of the attribute.
$('.innerDiv').on('click',function(){
var inid = $(this).closest('.parent_div').find('.inid');
inid.addClass('testclass');
console.log('selected -> ' + inid.attr(data-attr));
});
Source: https://api.jquery.com/closest/
A parent div contains multiple divs, one div named .div_object_last should always be at the end. Like the example below :
HTML
<div class="div_parent">
<div class="div_object">1</div>
<div class="div_object">2</div>
<div class="div_object_last"></div>
<div class="div_object">3</div> <!--- append -->
</div>
Javascript :
$('#div_parent').append('<div class="div_object">3</div>');
Expected result using JS :
<div class="div_parent">
<div class="div_object">1</div>
<div class="div_object">2</div>
<div class="div_object">3</div>
<div class="div_object_last"></div> <!--- moved to end --->
</div>
I was wondering if it was possible to put div_object_last at the end after the append event ?
Select the .div_object_last and use before() to add the new content:
$('.div_parent .div_object_last').before('<div class="div_object">3</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div_parent">
<div class="div_object">1</div>
<div class="div_object">2</div>
<div class="div_object_last">Last</div>
</div>
To insert an element before the last child element:
$('.div_parent').children().last().before('<div class="div_object">3</div>');
To move an existing element to be the last:
$('.div_object_last').appendTo('.div_parent');
To move el1 above/below el2:
// Above
$(el1).before(el2);
// Below
$(el1).after(el2);
You can try with this dynamic way :
$('.div_parent').append($('.div_parent .div_object_last'));
$('.div_parent div:last').before('<div class="div_object">3</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div_parent">
<div class="div_object">1</div>
<div class="div_object">2</div>
<div class="div_object_last">Last</div>
</div>
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/