How to replace divs with another divs using classes in javascript?-CodePudding

I need a JavaScript function that allows to select only two divs out of several and insert them respectively into others.

<div  id="arg1">first block</div>
<div  id="arg2">second block</div>
<div  id="arg3">third block</div>

<div >put the first block <div >here</div> and the second one <div >here</div>.</div>

I saw a solution here on stackoverflow (How to replace div with another div in javascript?), but it doesn't solve my problem. btw if I have to create a button, I would like the item div itself to be one

function show(param_div_id) {
  document.getElementById('main_place').innerHTML = 
  document.getElementById(param_div_id).innerHTML;
}

CodePudding user response：

If you want it to only select two out of the divs, you can use input type radio and then do the solution you saw on another post. You can redesign it to make it look like a button (or whatever) by doing "display: none" on it. Make sure to add a label to it so you can add text and make it more customizable. Hopefully this helps.

CodePudding user response：

If you want to query serveral elements at one time,you can use querySelectorAll()

For replace elments,it seems you have to replace them one by one

function show(ids) {
  let params = ids.split(',').map(p => '#' p).join(',')
  divs = document.querySelectorAll(params)
  
  let targets = document.querySelectorAll('.main_place')
  for(let i=0;i<targets.length;i  ){
    let target = targets[i];
    target.innerHTML = divs[i].innerHTML.bold()
  }
}

<div  id="arg1">first block</div>
<div  id="arg2">second block</div>
<div  id="arg3">third block</div>
<hr>
<div >put the first block <div >here</div> and the second one <div >here</div>.</div>
<button onclick = "show('arg1,arg2')">Test Button</button>

CodePudding user response：

You can do this in a versatile way with a .forEach() call:

const items = document.querySelectorAll('.item');
document.getElementById('btn').addEventListener('click', () => {
  document.querySelectorAll('.main_place').forEach((el, i) => {
    if (i > items.length-1) return;
    el.innerHTML = items[i].innerHTML;
    items[i].remove();
  });
});

<div >first block</div>
<div >second block</div>
<div >third block</div>

<br>
<div >put the first block
  <div >here</div>
  and the second one
  <div >here</div>
  .
</div>

<button id="btn">Replace divs</button>

Every element with the item class will be replaced with the corresponding element with the main_place class, in order. If you add more elements with the main_place class, then more elements with the item class will be replaced.

If there are more elements with the main_place class than there are elements with the items class, then the remainder won't be replaced with anything.

Alternatively, if you don't want to remove the original elements when they are replaced, all you need to do is remove the .remove() call. Like this:

const items = document.querySelectorAll('.item');
document.getElementById('btn').addEventListener('click', () => {
  document.querySelectorAll('.main_place').forEach((el, i) => {
    if (i > items.length-1) return;
    el.innerHTML = items[i].innerHTML;
  });
});

<div >first block</div>
<div >second block</div>
<div >third block</div>

<br>
<div >put the first block
  <div >here</div>
  and the second one
  <div >here</div>
  .
</div>

<button id="btn">Replace divs</button>