Javascript 创建新元素以替换现有元素

我一直在创建一个日历框小部件（一个允许您选择日期的小div弹出窗口）

除了一个特性外，所有的工作都完成了：当你创建对象时，你给它发送一个字段（包含日期的字段）；由于一组（真的）奇怪的需求，此字段不能具有易于阅读的格式（YYYYMMddhhmmss），因此我的脚本会隐藏此字段，并在其位置放置具有类似样式的div。我还没有找到一种方法，可以将div作为字段的兄弟添加到字段中，并直接添加到字段的旁边（而不是附加在父字段的末尾）

如何将ID字段作为参数，将其隐藏，并将div放在同一位置？

如果我能把它直接放在字段后面的HTML中，我可以把它的CSS复制到DIV（甚至是一个新的字段），没有人会更聪明；对旧字段的引用仍然有效，人类可以轻松地读取新字段，但就目前而言，我发现的最佳解决方案是让对象接受两个参数，一个用于目标字段，另一个用于目标div。这并不理想

jsFiddle：（我非常非常非常抱歉这个小部件的名字。即使按照双关语的标准，它也很糟糕。） JSFIDLE：（包括所选答案）

附言：

我在这个项目中只有一个真正的目标：最小化依赖性。这个小部件正在取代我的公司多年来使用的旧部件，随着时间的推移，它积累了十几个半的修改（每个都在不同的文件中），并且至少需要同样多的样式表和现有插件。没有人真正知道这是怎么回事。因为这只需要jQuery，没有其他脚本，没有其他样式表

…我想保持这种状态…

---

这是一个巨大的代码墙，你能把它简化到你需要做的部分，并展示出什么不起作用吗？是的，我有点担心。我有点相信代码有点边缘化。我将尝试制作一个不使用我整个项目的示例案例。包括的简化版本（带答案）非常有效。我的谷歌技能一定很糟糕，我以为我已经用尽了所有的互联网来寻找这个。是的，但是“之后”和“之前”不是最容易识别的功能：）

$('yourelement').hide().after(newDiv)