Muszę programowo zmienić element nadrzędny div. Na przykład

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

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

Zastanawiam się, czy można zmienić element nadrzędny div z id = "child" na div z id = "div_b"?

Mam poszukiwania, ale nigdzie blisko. Ale jeśli pojawi się podobne pytanie, daj mi znać.

Dziękuję Ci

0
Lyn 1 kwiecień 2020, 04:50

4 odpowiedzi

Najlepsza odpowiedź

Możesz po prostu użyć appendChild i przekazać węzeł jako parametr. Węzeł nie może znajdować się w dwóch miejscach jednocześnie, więc przeniesie go w odpowiednie miejsce.

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
zfrisch 1 kwiecień 2020, 01:59

W czystym JS możesz użyć document.querySelector (lub document.getElementById) i Node.appendChild, aby dołączyć { {X3}} div na div #div_b. Ponieważ węzeł nie może istnieć w więcej niż jednym miejscu, automatycznie usuwa go również z #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
Nick 1 kwiecień 2020, 03:03

W zależności od aplikacji możesz użyć querySelector lub querySelectorAll, aby uzyskać element div z id = "child". Następnie używając [insert element var] .classlist () możesz .remove ('child'), a następnie .add ('div_b').

-1
S Henry 1 kwiecień 2020, 01:56

Musisz dodać element do nowego rodzica, a następnie usunąć go ze starego. Jeśli możesz używać JQuery, możesz to łatwo zrobić za pomocą

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

Z JavaScriptem

var tmp = document.getElementById('child');
document.getElementById('div_b').appendChild(tmp.cloneNode(true));
tmp.remove();
0
Kamyar Mirzavaziri 1 kwiecień 2020, 02:02