Как я могу объединить два смежных DIV в один?

Question

HTML DOM

<div class="box-1">
...
</div>
<div class="box-2">
...
</div>

Могу ли я использовать JavaScript для удаления этой части </div><div class="box-2">?

Любая помощь, заранее спасибо!

Answer 1

Используя методы DOM, упрощенный пример может быть:

// ref .box-1 and .box-2
const box1 = document.querySelector('.box-1');
const box2 = document.querySelector('.box-2');

// move all child nodes from box2 to box1
// Array.from (or any method to copy a *live* DOM NodeList) is needed,
// for otherwise the DOM manipulation would throw off the loop 
Array.from(box2.childNodes).forEach(child => box1.appendChild(child));

// afterwards, remove box2
box2.parentNode.removeChild(box2);

<div class="box-1">
    <span>A</span>
    B
</div>

<div class="box-2">
    <span>C</span>
    D
</div>

---

Другой вариант - использовать манипуляции со строками для некоторых элементов innerHTML, но это быстро запутывается, поэтому я не рекомендую его.

Answer 2

Если я не ошибаюсь, вы хотите добавить детей следующего брата в предыдущего и избавиться от первого. В этом случае рассмотрите этот ввод:

<div class="box-1">
    SomeText 
    <div>child</div>
</div>
<div class="box-2">
    Some other text 
    <div>other child</div>
</div>

Вы можете написать эту функцию или что-то вроде:

function transfer(node){
    var next = node.nextElementSibling;
    if(!next){return};
    while(next.hasChildNodes()){
        node.appendChild(next.firstChild)
    }
    next.parentNode.removeChild(next);
}

transfer(body.querySelector("div"));

Вы получите:

<div class="box-1">
    SomeText 
    <div>child</div>
    Some other text
    <div>other child</div>
</div>

Answer 3

Интерпретируя тот факт, что вы не хотите удалять </div><div class="box-2">, который в основном "перемещает" содержимое box-2 в box-1, вы можете сделать что-то вроде этого:

document.querySelector('#move').addEventListener('click', function(){

  let box1 = document.querySelector('.box-1');
  let box2 = document.querySelector('.box-2');
  
  // copy the dom of box 2 into box 1
  box1.innerHTML += box2.innerHTML;
  
  // remove box 2
  box2.remove();
  
});

.box-1 {
  color: red;
}

.box-2 {
  color: blue;
}

<div class="box-1">
  Box 1
</div>

<div class="box-2">
  Box 2

  <p>
    Test
  </p>
</div>

<button id="move">
  move content
</button>

Не самое элегантное решение, но выполняет свою работу. Обратите внимание, что это не перемещает фактические узлы, а скорее копирует содержимое. Это означает, что любая ссылка, которую вы указали в js на элемент внутри блока 2, больше не будет действительной.

Answer 4

вы можете получить содержимое box-2 html, а затем добавить его в box-1, наконец удалить box-2

Answer 5

Скрипт перемещает первый вхождение div с class = "box-2" в div с class = "box-1". Если вы хотите, чтобы это работало с несколькими делителями, вам нужно выполнить l oop на основе выбора с document.querySelectorAll().

document.querySelector('button').onclick=ev=>{
 let b1=document.querySelector('.box-1');
 let b2=document.querySelector('.box-2');
 if (b1&&b2) {
   b1.innerHTML+='<br>'+b2.innerHTML; // I added a line break here ...
   b2.parentNode.removeChild(b2);
 }
}

.box-1 {background-color: green}
.box-2 {background-color: red}

<div class="box-1">
This is BOX 1
</div>
<div class="box-2">
This is BOX 2
</div>
<button>move 1 to 2</button>

Answer 6

Я думаю, что это работает

    var elmnt1 = document.getElementsByClassName("box-1")[0];
    var elmnt2 = document.getElementsByClassName("box-2")[0];
    elmnt1.appendchild(elmnt2);
    elmnt2.remove();