Подменить div на другой с таким же размером

Посмотрим следующий случай из жизни. Был текст, который, в частности, содержал div с зелёными границами:

<style>
  #moving-div {
    border: 5px groove green;
    padding: 5px;
    margin: 10px;
    background-color: yellow;
  }
</style>

Before Before Before

<div id="moving-div">
Text Text Text<br>
Text Text Text<br>
</div>

After After After

Программист Валера из вашей команды написал код, который позиционирует его абсолютно и смещает в правый верхний угол. Вот этот код:

          var div = document.getElementById('moving-div');
div.style.position = 'absolute';
div.style.right = div.style.top = 0;
        

Побочным результатом явилось смещение текста, который раньше шёл после DIV. Теперь он поднялся вверх:

Допишите код Валеры, сделав так, чтобы текст оставался на своём месте после того, как DIV будет смещен.

Сделайте это путём создания вспомогательного DIV с теми же width, height, border, margin, padding, что и у жёлтого DIV.

Используйте только JavaScript, без CSS.

Должно быть так (новому блоку задан фоновый цвет для демонстрации):

Открыть песочницу для задачи.

Нам нужно создать div с такими же размерами и вставить его на место «переезжающего».

Один из вариантов – это просто клонировать элемент.

Если делать это при помощи div.cloneNode(true), то склонируется все содержимое, которого может быть много. Обычно нам это не нужно, поэтому можно использовать div.cloneNode(false) для клонирования элемента со стилями, и потом поправить его width/height.

Можно и просто создать новый div и поставить ему нужные размеры.

Всё, кроме margin, можно получить из свойств DOM-элемента, а margin – только через getComputedStyle.

Причём margin мы обязаны поставить, так как иначе наш элемент при вставке будет вести себя иначе, чем исходный.

Код:

          var div = document.getElementById('moving-div');

var placeHolder = document.createElement('div');
placeHolder.style.height = div.offsetHeight + 'px';
// можно и width, но в этом примере это не обязательно
// из условия: Сделайте это путём создания вспомогательного DIV с теми же width...

// IE || другой браузер
var computedStyle = div.currentStyle || getComputedStyle(div, '');

placeHolder.style.marginTop = computedStyle.marginTop; // (1)
placeHolder.style.marginBottom = computedStyle.marginBottom;
        

В строке (1) использование полного название свойства "marginTop" гарантирует, что полученное значение будет корректным.

Открыть решение в песочнице.