Как перемещать элемент из одного места в другое в DOM с помощью обычного JavaScript?

Вопрос:

Я знаю, как это сделать в jQuery (непроверенный, но должен работать):

$(‘#foo’).html().appendTo(‘#bar’); $(‘#foo’).remove();

Но как это сделать в простом JS?

Лучший ответ:field = document.getElementById(‘e’); document.getElementById(‘x’).innerHTML = field.parentNode.innerHTML; field.parentNode.removeChild(field);

это ОДНО решение, вы можете искать clonenode.

Ответ №1

Ваш код jQuery можно сделать следующим образом в простом javascript:

var foo = document.getElementById(«foo»), bar = document.getElementById(«bar»); bar.innerHTML = foo.innerHTML; foo.parentNode.removeChild(foo);

Но это просто копирует html-код внутри foo в bar как строку, а затем удаляет foo из DOM.

Также возможно перемещение узлов, например:

var foo = document.getElementById(«foo»), bar = document.getElementById(«bar»); bar.innerHTML = «»; for (var node in foo.childNodes) { bar.appendChild(node); } foo.parentNode.removeChild(foo);

Это приведет к перемещению фактических дочерних узлов foo в bar, а затем удалит теперь пустой foo.

Ответ №2

Создание элемента

<div id=»div1″> <p id=»p1″>This is a paragraph.</p> <p id=»p2″>This is another paragraph.</p> </div> <script> var para=document.createElement(«p»); var node=document.createTextNode(«This is new.»); para.appendChild(node); var element=document.getElementById(«div1»); element.appendChild(para); </script>

Удаление элемента (вы должны знать родителя)

<div id=»div1″> <p id=»p1″>This is a paragraph.</p> <p id=»p2″>This is another paragraph.</p> </div> <script> var parent=document.getElementById(«div1»); var child=document.getElementById(«p1»); parent.removeChild(child); </script>

Привлечен к вам http://www.w3schools.com/js/js_htmldom_elements.asp

Ответ №3

В своей простейшей, есть такая возможность:

var foo = document.getElementById(‘foo’); document.getElementById(‘bar’).innerHTML = foo.innerHTML; foo.parentNode.removeChild(foo);

JS Fiddle demo.

И, используя функцию, чтобы свести к минимуму повторение:

function moveTo(source,target){ if (!source || !target) { return false; } else { var children = source.childNodes; while (children.length){ target.appendChild(children[0]); } source.parentNode.removeChild(source); } } var bar = document.getElementById(‘bar’), foo = document.getElementById(‘foo’); moveTo(foo, bar);

JS Fiddle demo.