«Вырезать и вставить» - перемещение узлов в DOM с помощью Javascript

У меня есть html-код, который выглядит примерно так:

<div id = "id1">
  <div id = "id2">
    <p>some html</p>
    <span>maybe some more</span>
  </div>
  <div id = "id3">
    <p>different text here</p>
    <input type = "text">
    <span>maybe even a form item</span>
  </div>
</div>

Очевидно, дело не только в этом, но это основная идея. Что мне нужно сделать, так это поменять местами # id2 и # id3, чтобы результат был таким:

<div id = "id1">
  <div id = "id3">...</div>
  <div id = "id2">...</div>
</div>

Кто-нибудь знает о функции (я уверен, что я не первый, кому эта функция требуется), которая может читать и записывать два узла (и всех их дочерних узлов), чтобы поменять местами их расположение в DOM?

javascript dom

27.11.2008 20:26

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

35 566

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

В этом случае document.getElementById('id1').appendChild(document.getElementById('id2')); должен помочь.

В более общем плане вы можете использовать insertBefore().

.prepend() может быть тем, что некоторые тоже ищут. Вот краткий список более полезных методов.

— 10.06.2020 19:53

27.11.2008 20:29

Эта функция берет любой переданный ей узел и обертывает его заданным тегом. В примере фрагмента кода я заключил тег диапазона в тег раздела.

function wrap(node, tag) {
  node.parentNode.insertBefore(document.createElement(tag), node);
  node.previousElementSibling.appendChild(node);
}

function wrap(node, tag) {
  node.parentNode.insertBefore(document.createElement(tag), node);
  node.previousElementSibling.appendChild(node);
}
let toWrap = document.querySelector("#hi");
wrap(toWrap, "section");
console.info(document.querySelector("section > #hi"), " section wrapped element");