Можно ли изменить <div>родительский элемент, используя javascript? - PullRequest
Новая
       0

Можно ли изменить <div>родительский элемент, используя javascript?

0 голосов
/ 01 апреля 2020

Мне нужно программно изменить родителя div. Например 

<body>
  <div id="div_a">
    <div id="child"></div>
  </div>

  <div id="div_b">
  </div>
</body>

Интересно, можно ли заменить div с id = "child" parent на div с id = "div_b"?

У меня есть поиск, но нигде близко. Но если есть похожий вопрос, пожалуйста, дайте мне знать.

Спасибо

Ответы [ 4 ]

0 голосов
/ 01 апреля 2020

Вы можете просто использовать appendChild и передать узел в качестве параметра. Узел не может быть в двух местах одновременно, поэтому он переместит его в нужное место. 

let child = document.querySelector("#child");
let parent = document.querySelector("#div_b");

parent.appendChild(child);
  <div id="div_a">
    <div id="child"></div>
  </div>

  <div id="div_b">
  </div>
0 голосов
/ 01 апреля 2020

В зависимости от вашего приложения вы можете использовать querySelector или querySelectorAll, чтобы получить div с id = "child". Затем, используя [insert element var] .classlist (), вы можете .remove ('child') и затем .add ('div_b').

0 голосов
/ 01 апреля 2020

В чистом JS вы можете использовать document.querySelector (или document.getElementById) и Node.appendChild, чтобы добавить #child div до #div_b дел. Поскольку узел не может существовать более чем в одном месте, он также автоматически удаляет его из #div_a: 

document.querySelector('#div_b').appendChild(document.querySelector('#child'));
// or document.getElementById('div_b').appendChild(document.getElementById('child'));
<body>
  <div id="div_a">
  Div A!
    <div id="child">I am a child of Div A</div>
  </div>
  <hr/>
  <div id="div_b">
  Div B!
  </div>
</body>
0 голосов
/ 01 апреля 2020

Вам необходимо добавить элемент к новому родителю, а затем удалить его из старого. Если вы можете использовать JQuery, вы можете сделать это легко с 

jQuery("#child").detach().appendTo('#div_b')

с JavaScript

var tmp = document.getElementById('child');
document.getElementById('div_b').appendChild(tmp.cloneNode(true));
tmp.remove();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...