Блог

В прототипе или обычном, но совместимом с несколькими браузерами Javascript, как мне переместить содержимое div в содержимое другого div?

Внутри div находится форма с идентификаторами и зависимый Javascript-код с наблюдателями событий. Я не хочу, чтобы это прерывалось только потому, что я переместил блок в DOM. Решение ‘this innerHTML = that innerHTML’ — это не то, что я ищу. Мне также нужно будет сделать это, когда DOM будет загружен.

Я хочу исходить из этого:

 <div id='here'>
    <div id='MacGuffin'>
    <p>Hello Worlds!</p>
    </div>
</div>
<div id='there'>
</div>
  

к этому:

 <div id='here'>
</div>
<div id='there'>
    <div id='MacGuffin'>
    <p>Hello Worlds!</p>
    </div>
</div>
  

…когда документ загружается без каких-либо скачков.

Вы можете добавить это в самом конце тега BODY:

 <script>
  document.getElementById('there').appendChild(
    document.getElementById('MacGuffin')
  );
</script>
  

MacGuffin будут автоматически перемещены из одного в другой.
И не будет никакого мерцания.

Возможно, это не главное, но нет встроенного метода интерфейса Javascript Node.migrateChild(). Если у фрагмента уже есть родительский элемент в другом месте DOM (как это делает div id =’MacGuffin’ в примере разметки выше), appendChild() незаметно отсоединяет фрагмент аргумента от любого текущего родительского элемента перед повторным подключением под новым родительским элементом. На мой взгляд, migrateChild() было бы более семантически значимым именем метода, чем appendChild(), меньше необходимости в поиске разработчиков StackOverflow, чтобы ссылаться на его более мощные возможности.

Чтобы переместить содержимое из here в there , это работает, при условии, что here содержит все, что вы хотите переместить, например <div> :

 $('there').insert($('here').descendants()[0]);
  

descendants() возвращает массив, а insert принимает содержимое, поэтому используйте первый элемент.

Чтобы переместить содержимое из here в there , вы в основном после:

 $('there').insert($('here').childNodes);
  

К сожалению, это не работает.

Как и в двух других ответах, похоже, вам придется прибегнуть к простому JavaScript, в котором prototype предоставляет только сокращение для document.getElementById .

 var frag = document.createDocumentFragment();
for (var c = $('nav').firstChild, n; c; c = n) {
    n = c.nextSibling;
    frag.appendChild(c);
}
$('header').appendChild(frag);
  

(Статистику производительности DocumentFragments смотрите в блоге Джона Ресигна:
http://ejohn.org/blog/dom-documentfragments /)