JSFiddle - React, Tailwind, and code Playground

by paska

HTML

<div></div>
<div></div>
<div></div>
<div id="div1"></div>

CSS

div {
    width: 100px;
    height: 100px;
    background-color: blue;
    border: 1px solid black;
}
#div1 {
    float: right;
}

JavaScript

var $existingDiv = $("#div1"),
    pos = $existingDiv.position(),
    $newDiv = $("<div></div>").css({
        "background-color": "red",
        "position": "absolute"
    });
pos.top -= 100;
$newDiv.css(pos);
$existingDiv.after($newDiv);
pos.top += 200;
$newDiv = $("<div></div>").css({
        "background-color": "red",
        "position": "absolute"
    });
$newDiv.css(pos);
$existingDiv.after($newDiv);
pos.top -= 100;
pos.left -= 100;
$newDiv = $("<div></div>").css({
        "background-color": "red",
        "position": "absolute"
    });
$newDiv.css(pos);
$existingDiv.after($newDiv);
$existingDiv.remove();