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;
}

Rachael · Accepted Answer · 2022-11-07 01:43:25Z

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 7, 2022 at 1:43

Rachael

1

Sign up to request clarification or add additional context in comments.

2 Comments

Michael M. Over a year ago

Can you provide some code to go along with your answer?

Community Over a year ago

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.

flyingfox · Accepted Answer · 2022-11-07 01:53:52Z

0

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>

answered Nov 7, 2022 at 1:53

flyingfox

13.5k4 gold badges30 silver badges43 bronze badges

1 Comment

user20434402 Over a year ago

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.

Michael M. · Accepted Answer · 2022-11-07 01:54:49Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related