My document structure is:
<div id="mainWindow">
<div id="subele1"></div>
</div>
<div id="subWindow">
<div id="subele2"></div>
</div>
I want to create a button so that the children subele1 and subele2 are interchanged every time the button is clicked.
UPD
function handleButtonClicked() {
const mainElement = document.getElementById('subele1')
const subElement = document.getElementById('subele2')
const mainElementValue = mainElement.innerHTML
mainElement.innerHTML = subElement.innerHTML
subElement.innerHTML = mainElementValue
}
<div id="mainWindow">
<div id="subele1">main Window!</div>
</div>
<div id="subWindow">
<div id="subele2">sub Window?</div>
</div>
<button id='main' onclick={handleButtonClicked()}>switch</button>
Related
i want to move a div form the start to the end in a the same div:from 1-2-3 to 2-3-1
my code
const cards = document.querySelectorAll(".card");
const firstCard = document.querySelectorAll(".card")[0].innerHTML;
cards[0].remove();
document.getElementById("mainC").appendChild(firstCard);
<div id="mainC">
<div class="card"> 1 </div>
<div class="card"> 2 </div>
<div class="card"> 3 </div>
</div>
i want to move a div form the start to the end in a the same div:from 1-2-3 to 2-3-1
Based on your original code,we need to remove .innerHTML,then it will work
const cards = document.querySelectorAll(".card");
const firstCard = document.querySelectorAll(".card")[0];// remove .innerHTML and it will work
cards[0].remove();
document.getElementById("mainC").appendChild(firstCard);
<div id="mainC">
<div class="card"> 1 </div>
<div class="card"> 2 </div>
<div class="card"> 3 </div>
</div>
Another solution is to store the content into an array and change the array element order
let divs = []
document.querySelectorAll('#mainC .card').forEach(d =>{
divs.push(d.outerHTML)
})
divs.push(divs.shift())
document.querySelector('#mainC').innerHTML = divs.join('')
<div id="mainC">
<div class="card"> 1 </div>
<div class="card"> 2 </div>
<div class="card"> 3 </div>
</div>
you have used document.querySelectorAll(".card")[0].innerHTML which gives '1' which is not type "node" so it will give an error when appending as a child.
remove .innerHTML and it will work
here is an example that removes the first child and append it to the end.
const shuffle = () => {
const parent = document.querySelector("#mainContainer");
const childrens = [...parent.children];
parent.appendChild(childrens.splice(0,1)[0]);
};
<button type="button" onclick=shuffle()> suffel</button>
<div id="mainContainer">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
</div>
If the element has children insert a new div "i-new-element". parent2 and parent3 get a new div.
child3-parent3 has children but doesn't get a new giant. Why?
How can I make it possible for children who have children to get a new div?
it should look like:
<div id="child3-parent3">
<div id="i-new-element"></div>
<div id="child3"></div>
<div id="child4"></div>
</div>
var container = document.getElementById("container").querySelectorAll("#container > *");
container.forEach(function(div) {
{
if (div.hasChildNodes()) {
let parentElement = div;
let theFirstChild = parentElement.firstChild;
let newElement = document.createElement("div")
newElement.id = "i-new-eleemnt"
parentElement.insertBefore(newElement, theFirstChild)
}
}
});
<div id="container">
<div id="parent1"></div>
<div id="parent2">
<div id="child1"></div>
<div id="child2"></div>
<div id="child3-parent3">
<div id="child3"></div>
<div id="child4"></div>
</div>
</div>
<div id="parent3">
<div id="child5"></div>
<div id="child6"></div>
</div>
</div>
Using
var container = document.getElementById("container");
var elements = container.querySelectorAll(":scope *");
instead of
var container = document.getElementById("container").querySelectorAll("#container > *");
should fix your problem.
var container = document.getElementById("container");
var elements = container.querySelectorAll(":scope *");
elements.forEach(function(div){
{
if (div.hasChildNodes()) {
let parentElement = div;
let theFirstChild = parentElement.firstChild;
let newElement = document.createElement("div")
newElement.id = "i-new-eleemnt"
parentElement.insertBefore(newElement, theFirstChild)
}
}
});
<div id="container">
<div id="parent1"></div>
<div id="parent2">
<div id="child1"></div>
<div id="child2"></div>
<div id="child3-parent3">
<div id="child3"></div>
<div id="child4"></div>
</div>
</div>
<div id="parent3">
<div id="child5"></div>
<div id="child6"></div>
</div>
</div>
Edit: Further information about the :scope CSS pseudo-class can be found here and here.
I believe your problem is the following, even it is not described well in your sample HTML:
<div id="parent1"></div> per instance is actually not an empty node but contains some text i.e. <div id="parent1">some text here</div>.
You might believe or not, but node.hasChildNodes() will count any text as a child node (text node, nodeType = 3), so it will always return true is any text is present.
To avoid that, you can filter the text nodes first or just use this workaround:
Replace this line:
if (div.hasChildNodes()) {
with that line:
if (div.children.length) {
children property is not counting text nodes.
That's all you have to do, I believe.
var container = document.querySelectorAll("#container > *");
container.forEach(function(div) {
{
if (div.children.length) {
let parentElement = div;
let theFirstChild = parentElement.children[0];
let newElement = document.createElement("div")
newElement.id = "i-new-eleemnt";
newElement.innerHTML = 'i-new-eleemnt'
parentElement.insertBefore(newElement, theFirstChild);
}
}
});
<div id="container">
<div id="parent1">parent1</div>
<div id="parent2">parent2
<div id="child1">child1</div>
<div id="child2">child2</div>
<div id="child3-parent3">child3-parent3
<div id="child3">child3</div>
<div id="child4">child4</div>
</div>
</div>
<div id="parent3">parent3
<div id="child5">child5</div>
<div id="child6">child6</div>
</div>
</div>
How can I achieve something like this.
I have a Container with
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
What I now want to archieve for example: If I have
const div1ToSwap = ( div 1 )
const div2ToSwap = ( div 4 )
That the final result will be
<div class="div4">4</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div1">1</div>
<div class="div5">5</div>
This is a very hacky way to do it, but this way you don't need to remove all elements then append them back in.
let div1 = document.querySelector(".div1");
let div4 = document.querySelector(".div4");
let temp = div1.cloneNode(true);
div1.innerHTML = div4.innerHTML;
div1.className = div4.className;
div4.innerHTML = temp.innerHTML;
div4.className = temp.className;
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
it's simple, first you need to container all the div you need to make this script like this, we will write the function later
you can try it by the link https://codepen.io/nt0412/pen/rNJWMKP
<div class="all-div-container">
<div class="div1" onclick="swapDiv(event,this);">
1
</div>
<div class="div2" onclick="swapDiv(event,this);">
2
</div>
<div class="div3" onclick="swapDiv(event,this);">
3
</div>
<div class="div4" onclick="swapDiv(event,this);">
4
</div>
<div class="div5" onclick="swapDiv(event,this);">
5
</div>
</div>
<script type="text/javascript">
function swapDiv(event, elem) {
elem.parentNode.insertBefore(elem, elem.parentNode.firstChild);
}
</script>
I want to show a modal popup when the user clicked a button, but it keeps adding to the innerHTML
<div class="popup-container hide">
<div class="popup-wrapper">
<!-- <div class="popup-content"> -->
<!-- </div> -->
<div class="order-container">
<div class="value-container">
<button class="minusBtn"><img src="icon/minus.png" alt="" width="30px"></button>
<div class="value">1</div>
<button class="plusBtn"><img src="icon/plus.png" alt="" width="30px"></button>
</div>
<button class="orderBtn">Add To Cart</button>
</div>
</div>
</div>
Here I create a new div and insert it into the parent, and showing the clicked data with literal template
let content = document.createElement('div');
content.classList.add('popup-content');
content.innerHTML = `
<div class="popup-image">
<img src="mcd/${item.img}" alt="">
</div>
<div class="popup-name">
${item.name}
</div>
<div class="popup-price">
${item.price}
</div>
`;
let wrapper = document.querySelector('.popup-wrapper');
let orderContainer = document.querySelector('.order-container');
wrapper.insertBefore(content, orderContainer);
You need to remove all existing .popup-content elements before you insert a new one if you want only one to appear.
document.querySelectorAll('.popup-content').forEach(el => el.remove());
let content = document.createElement('div');
...
I need - button on click to hide each div, but here in my code only hide the first one then not working.
const closeInnermenu = document.querySelector('closeInnrmenu');
const innerC = document.querySelector('.inner-container')
closeInnermenu.addEventListener('click', () => {
innerC.style.display = 'none'
})
<div class="inner-container">
<div>Demo 1</div>
<button class="closeInnrmenu"></button>
</div>
<div class="inner-container">
<div>Demo 2</div>
<button class="closeInnrmenu"></button>
</div>
Get all the button using document.querySelectorAll('.closeInnrmenu') instead of document.querySelector since this will only give first matching element. Then iterate and add event listener to the button so that on click get the closest div and add style to it.
Also there is a type error here const closeInnermenu = document.querySelector('closeInnrmenu');. You need to pass dot as class selector
document.querySelectorAll('.closeInnrmenu').forEach((item) => {
item.addEventListener('click', function() {
this.closest('div').style.display = 'none'
})
})
<div class="inner-container">
<div>Demo 1</div>
<button class="closeInnrmenu">Close</button>
</div>
<div class="inner-container">
<div>Demo 2</div>
<button class="closeInnrmenu">Close</button>
</div>
Use:
let buttonClose = document.querySelectorAll('.closeInnrmenu')
for(let btns of buttonClose){
btns.addEventListener('click', function func(e) {
this.parentNode.style.display = 'none'
})
}
<div class="inner-container">
<div>Demo 1</div>
<button class="closeInnrmenu">Close</button>
</div>
<div class="inner-container">
<div>Demo 2</div>
<button class="closeInnrmenu">Close</button>
</div>
You can delegate
If you do not want to wrap in a div, use
document.addEventListener('click'
Here I wrapped
document.getElementById("container").addEventListener('click', (e) => {
const tgt = e.target;
if (tgt.classList.contains("closeInnrmenu")) {
tgt.previousElementSibling.style.display = 'none'
}
})
<div id="container">
<div class="inner-container">
<div>Demo 1</div>
<button class="closeInnrmenu"></button>
</div>
<div class="inner-container">
<div>Demo 2</div>
<button class="closeInnrmenu"></button>
</div>
</div>