Нужно, чтобы ребенок div стал родителем, но возможно ли это в js или css?

Question

Привет! Мне нужно переместить дочерний элемент, чтобы он стал родительским, поэтому, например, у меня есть этот код:

<div id="parent1"></div>

<div id="parent2">
<div id="child1">some text in here</div>
</div>

Я хочу, чтобы child1 был перемещен за пределы parent2, например, под родительским элементом 1, поэтому это похоже на:

<div id="parent1"></div>
<div id="child1">some text in here</div>

<div id="parent2">

</div>

Я не могу отредактировать исходный код страницы, чтобы изменить его, поэтому нужно сделать это в jquery или css, любые идеи.

спасибо

Answer 1

Попробуйте это:

$('#child1').insertAfter('#parent1');

Answer 2

$('#child1').insertBefore('#parent2');

Answer 3

у вас есть несколько вариантов сделать это, некоторые из них следующие:

$('#parent1').prepend($('#child1'));
$('#child1').prependTo($('#parent1'));
 $('#child1').insertAfter($('#parent1'));

fiddle : demo

Answer 4

Вы не можете изменить DOM с помощью CSS, вы можете только изменить его внешний вид.Был дан ответ jQuery в формате js:

var p = document.getElementById('parent1');
var c = document.getElementById('child1');

if (p && c) {
  // insert c as last child of p
  p.appendChild(c);

  // insert c as first child of p
  p.insertBefore(c, p.firstChild);
}

Если вы хотите первый вариант, вы можете сделать это одной строкой, но я не рекомендую:* Если вы используете псевдоним методов DOM, он может быть короче.