I need to move an HTML element to a location "after" the indicated element id
<div class="some">
<div id="dest">blablabla</div>
</div>
<div id="source">
test
</div>
I want to move the div "source" after "dest":
<div class="some">
<div id="dest">blablabla</div>
<div id="source">
test
</div>
</div>
The parent of "dest" doesn't have an ID!
You can use ChildNode.after() for that
The ChildNode.after() method inserts a set of Node or DOMString objects in the children list of this ChildNode's parent, just after this ChildNode. DOMString objects are inserted as equivalent Text nodes.
function move() {
let dest = document.getElementById("dest");
let source = document.getElementById("source");
dest.after(source);
}
<div class="some">
<div id="dest">blablabla</div>
</div>
<input type="button" value="move" onclick="move()">
<div id="source">
test
</div>
Related
I have a parent container that has few nodes. the tree structure looks like:
<div class="main">
<div class="child1">some content1</div>
<div class="child2">some content4</div>
<p></p>
<span></span>
<div class="child3" data-mask="child3-content">some content5</div> // I want to access this child using the data set property attached to it.
<div class="child4">some content13</div>
</div>
When I click on the body element, I want to access certain child node when clicked using the dataset data-mask and if this property exsists I want to return null
eg:
componentDidMount() {
window.addEventListener("click", this.onBodyClick);
}
onBodyClick(eve) {
const rc = ReactDOM.findDOMNode(this);
/*this will give me the entire dom node.
<div class="main">
<div class="child1">some content1</div>
<div class="child2">some content4</div>
<p></p>
<span></span>
<div class="child3" data-mask="child3-content">some content5</div> // I want to access this child using the data set property attached to it.
<div class="child4">some content13</div>
</div>
*/
/* From here I want to search for the below child
<div class="child3" data-mask="child3-content">some content5</div>
*/
//Here I'm not sure how to access use `eve` to get that node using the dataset.
}
any ideas around?
Just add the onClick listener to that main class div and make a function call it there, that will give you the event from that you can get the element and attribute value.
handleClick(e){
console.log(e.currentTarget) // will give you the clicked element
console.log(e.currentTarget.getAttribute("data-mask")) // will give you
the value of data-mask attribute
}
<div class="main" onClick={(e)=>handleClick(e)}>
<div class="child1">some content1</div>
<div class="child2">some content4</div>
<p></p>
<span></span>
<div class="child3" data-mask="child3-content">some content5</div>
</div>
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
I have the DOM structure like below
<div class="table_body">
<div class="table_row">
<div class="table_cell">first</div>
<div class="table_cell">chocolate products</div><!-- want to access this div content -->
</div>
<div class="table_row">
<div class="table_cell">third</div>
<div class="table_cell">fourth</div>
</div>
</div>
From the above HTML I want to access the div content of second div with classname table_cell inside first table_row div.
So basically I want to retrieve the content of div with classname table_cell with content chocolate products.
I have tried to do it like below
const element = document.querySelector('.rdt_TableBody');
const element1 = element.querySelectorAll('.rdt_TableRow')[0]
const element2 = element1.querySelectorAll('.rdt_TableCell')[0].innerHTML;
When I log element2 value it gives some strange output and not the text "chocolate products"
Could someone help me how to fix this. Thanks.
You can use:
the :nth-of-type pseudo-selector
combined with the immediate-child selector (>)
Example:
const selectedDiv = document.querySelector('.table_body > div:nth-of-type(1) > div:nth-of-type(2)');
Working Example:
const selectedDiv = document.querySelector('.table_body > div:nth-of-type(1) > div:nth-of-type(2)');
selectedDiv.style.color = 'white';
selectedDiv.style.backgroundColor = 'red';
<div class="table_body">
<div class="table_row">
<div class="table_cell">first</div>
<div class="table_cell">chocolate products</div> //want to access this div content
</div>
<div class="table_row">
<div class="table_cell">third</div>
<div class="table_cell">fourth</div>
</div>
</div>
In your code
element1.querySelectorAll('.table_cell')[0], this is targeting the first element i.e., <div class="table_cell">first</div>. That's the reason why you are not getting the expected output.
I have made it to element1.querySelectorAll('.table_cell')[1], so that it'll target <div class="table_cell">chocolate products</div>.
const element = document.querySelector('.table_body');
const element1 = element.querySelectorAll('.table_row')[0]
const element2 = element1.querySelectorAll('.table_cell')[1].innerHTML;
console.log(element2);
<div class="table_body">
<div class="table_row">
<div class="table_cell">first</div>
<div class="table_cell">chocolate products</div>
</div>
<div class="table_row">
<div class="table_cell">third</div>
<div class="table_cell">fourth</div>
</div>
</div>
Since the element that you want to target is the last div with having class table_cell, you can use :last-of-type on table_cell class using document.querySelector. But otherwise you can also use :nth-of-type if there are more than 2 elements and you want to target any element in between first and last.
Below is the example using :last-of-type.
const elem = document.querySelector(".table_row > .table_cell:last-of-type");
console.log(elem?.innerHTML);
<div class="table_body">
<div class="table_row">
<div class="table_cell">first</div>
<div class="table_cell">chocolate products</div> //want to access this div content
</div>
<div class="table_row">
<div class="table_cell">third</div>
<div class="table_cell">fourth</div>
</div>
</div>
For more info you can refer :nth-of-type, :last-of-type and child combinator(>).
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/
I am trying to get url from href and paste it in background image.
The problem is that it is applying to just first div not on all div. Is this possible without giving unique classes?
HTML
<div id="main-bg"> text
<div id="inner-content"> </div>
</div>
<div id="main-bg"> text
<div id="inner-content"> </div>
</div>
<div id="main-bg"> text
<div id="inner-content"> </div>
</div>
<div id="main-bg"> text
<div id="inner-content"> </div>
</div>
JS
$('#main-bg').css(
'background-image', 'url(' + $('#inner-content a').attr('href') + ')'
);
JSFIDDLE: https://jsfiddle.net/pr07zymf/
An id MUST be unique to each element! Using it multiple times may work at times in CSS, though, JavaScript isn't so forgiving. The reason only the first <div> is styled is because JavaScript ignores all other elements with the same id.
You can use classes instead as shown in the example below!
Example Code:
/* Iterate over every element having the given class. */
$('.main-bg').each(function (index, element) {
/* Cache a jQuery instance of the element. */
var el = $(element);
/* Get the 'href' and assign it as the 'background-image' for each element. */
el.css('background-image', 'url(' + el.find('.inner-content a').attr('href') + ')');
});
.main-bg {color: #fff}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-bg"> text
<div class="inner-content">
</div>
</div>
<div class="main-bg"> text
<div class="inner-content">
</div>
</div>
<div class="main-bg"> text
<div class="inner-content">
</div>
</div>
<div class="main-bg"> text
<div class="inner-content">
</div>
</div>
When you are using HTML, please remember, the ID should always be UNIQUE.
You cannot make them the same name like "main-bg".
Solutions:
1, change their id's name to <div id ="main-bg1">, <div id ="main-bg2">, <div id ="main-bg3">, and <div id ="main-bg4">
2, use CLASS like
<div class="main-bg"> text
<div class="inner-content"> </div>
And remember, every time when you do
$('#ID')
or
document.getElementById(ID)
It will always choose the FIRST element which has this ID.