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

Question

I need a JavaScript function that allows to select only two divs out of several and insert them respectively into others. My code has 15 .item and 4 .item2. I'm developing an app that generates essay templates. The .item are keyword arguments that need to be included in a predicate structure (class .item2, which has 2 .main_place divs - it takes 2 arguments out of 15). I would like to create a function where the button to insert some .item in the .main_place is the .item itself, so that the user can define the order of presentation of arguments in the predicate based on what he selected.

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

<div class="item2">put the first block <div class="main_place">here</div> and the second one <div class="main_place">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;
}

score 0 · Answer 1 · answered Nov 07 '22 at 01:43

0

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.

answered Nov 07 '22 at 01:43

Rachael

1

Can you provide some code to go along with your answer? – Michael M. Nov 07 '22 at 01:51
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 10 '22 at 12:55

Michael M. · Answer 2 · 2022-11-07T01:54:49.493

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 class="item">first block</div>
<div class="item">second block</div>
<div class="item">third block</div>

<br>
<div class="item2">put the first block
  <div class="main_place">here</div>
  and the second one
  <div class="main_place">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 class="item">first block</div>
<div class="item">second block</div>
<div class="item">third block</div>

<br>
<div class="item2">put the first block
  <div class="main_place">here</div>
  and the second one
  <div class="main_place">here</div>
  .
</div>

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

score 0 · Answer 3 · answered Nov 07 '22 at 01:53

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 class="item" id="arg1">first block</div>
<div class="item" id="arg2">second block</div>
<div class="item" id="arg3">third block</div>
<hr>
<div class="item2">put the first block <div class="main_place">here</div> and the second one <div class="main_place">here</div>.</div>
<button onclick = "show('arg1,arg2')">Test Button</button>

Thanks for answering, but it doesn't solve my problem at all (that's my fault - I wasn't very specific). My code has 15 .item and 4 .item2. I'm developing an app that generates essay templates. The .item class are keyword arguments that need to be included in a predicate structure (class .item2, which has 2 main_place divs - it takes 2 arguments out of 15). I would like to create a function where the button to insert some .item in the main_place is in the .item itself, so that the user can define the order of presentation of arguments in the predicate based on what he selected. — user20434402, Nov 09 '22 at 15:02

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

3 Answers3