Dev Faq
0
votes

Est-il possible de changer le parent
en utilisant javascript?

J'ai besoin de changer un parent div par programmation. Par exemple 

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

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

Je me demande s'il est possible de changer le div avec id = "child" parent en div avec id = "div_b"?

J'ai une recherche , mais nulle part proche. Mais au cas où il y aurait une question similaire, merci de me le faire savoir.

Merci

1 commentaires

soyez plus précis, si vous voulez transformer

et le déplacer en dehors de

4 Réponses :

0
votes

Vous devez ajouter l'élément au nouveau parent, puis le supprimer de l'ancien. Si vous pouvez utiliser JQuery, vous pouvez le faire facilement avec 

var tmp = document.getElementById('child');
document.getElementById('div_b').appendChild(tmp.cloneNode(true));
tmp.remove();

avec JavaScript 

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

0 commentaires
-1
votes

En fonction de votre application, vous pouvez utiliser querySelector ou querySelectorAll pour obtenir le div avec id = "child". Ensuite, en utilisant [insert element var] .classlist (), vous pouvez .remove ('child') puis .add ('div_b').

0 commentaires
0
votes

En JS pur, vous pouvez utiliser document .querySelector (ou document.getElementById ) et Node.appendChild pour ajouter le div #child au div #div_b . Puisqu'un nœud ne peut pas exister à plusieurs endroits, cela le supprime également automatiquement des données #div_a:

<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>
document.querySelector('#div_b').appendChild(document.querySelector('#child'));
// or document.getElementById('div_b').appendChild(document.getElementById('child'));

0 commentaires
0
votes

Vous pouvez simplement utiliser appendChild et passer le nœud comme paramètre. Un nœud ne peut pas être à deux endroits à la fois, il le déplacera donc vers l'emplacement approprié. 

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

  <div id="div_b">
  </div>
let child = document.querySelector("#child");
let parent = document.querySelector("#div_b");

parent.appendChild(child);

2 commentaires

Premièrement, je suis désolé. Je ne suis pas expert en programmation Web. Mais j'ai trouvé que cette réponse était la plus simple et répondait directement à mes besoins. D'autres réponses pourraient fonctionner et aussi vraies. Malheureusement, je ne peux en choisir qu'un. Quoi qu'il en soit, je me demande pourquoi tant de votes négatifs sur une autre réponse?

@Lyn Je suppose que la réponse qui a été déclassée est probablement parce qu'elle n'a pas vraiment répondu directement à la question et n'a pas montré de code réel.

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO