Javascript 将新div置于上方/将旧div移至下方_Javascript_Jquery_Html_Css

Javascript 将新div置于上方/将旧div移至下方

javascript jquery html css

Javascript 将新div置于上方/将旧div移至下方,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一些吐司。我给了他们一个“绝对”的位置，希望他们能够自立新的祝酒者应该将自己置于现有祝酒者之上。旧的那一个会向下移动这是我的重要部分： CreateWrapper(toastMessage, foreColor, borderColor, backgroundColorIconDiv, backgroundColorContentDiv) { var wrapperDiv = document.createElement("div"); var width = 350;

我有一些吐司。我给了他们一个“绝对”的位置，希望他们能够自立

新的祝酒者应该将自己置于现有祝酒者之上。旧的那一个会向下移动

这是我的重要部分：

CreateWrapper(toastMessage, foreColor, borderColor, backgroundColorIconDiv, backgroundColorContentDiv) {
    var wrapperDiv = document.createElement("div");
    var width = 350;

    wrapperDiv.id = "toast_" + this.toastCounter;
    wrapperDiv.style.position = "absolute";
    wrapperDiv.style.left = "50%";
    wrapperDiv.style.display = "none";
    wrapperDiv.style.width = width + "px";
    wrapperDiv.style.height = "100px";
    wrapperDiv.style.border = "2px solid " + borderColor;
    wrapperDiv.style.borderRadius = "10px";
    wrapperDiv.onclick = function() {
      wrapperDiv.remove(); // Destroy the toast by clicking on it
    }
    document.body.appendChild(wrapperDiv);
  }

创建后，我将此代码用于一些动画并将其销毁：

var thisToast = this.toastCounter - 1; // get the toast Id
$(document).find("#toast_" + thisToast)
  .fadeIn(750)
  .delay(3000)
  .fadeOut(750, function() {
    $(this).remove(); // Destroy the toast
  });

这是我要找的东西的照片

看看这个

您可以使用的网格系统使事情变得简单一点。你永远不应该真正使用绝对布局，它使响应网页不可能-看看当你调整浏览器大小时会发生什么

您将想看看API

以及附带的HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
 <script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/expect/1.20.2/expect.js"></script>

  <div class="container">
    hey
  </div>

  </body>
</html>


JS-Bin
嘿

您正在寻找的方法是查看此

您可以使用的网格系统使事情变得简单一点。你永远不应该真正使用绝对布局，它使响应网页不可能-看看当你调整浏览器大小时会发生什么

您将想看看API

以及附带的HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
 <script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/expect/1.20.2/expect.js"></script>

  <div class="container">
    hey
  </div>

  </body>
</html>


JS-Bin
嘿

您正在寻找的方法是

，哪个是问题？发生了什么事？请发布一个工作片段，复制您的问题$（'parent_el'）.prepend（'//stuff to prepend'）-可能-使用

document.body.appendBefore（wrapperDiv，document.body.firstChild）

而不是

document.body.appendChild（wrapperDiv）document.body.appendBefore（wrapperDiv，document.body.firstChi‌ld）
不是一个函数。所以我尝试了document.body.insertBefore（wrapperDiv，document.body.firstChild）但这不起作用。它将所有div放在同一个位置，这是问题/问题？发生了什么事？请发布一个工作片段，复制您的问题$（'parent_el'）.prepend（'//stuff to prepend'）-可能-使用document.body.appendBefore（wrapperDiv，document.body.firstChild）
而不是document.body.appendChild（wrapperDiv）document.body.appendBefore（wrapperDiv，document.body.firstChi‌ld）
不是一个函数。所以我尝试了document.body.insertBefore（wrapperDiv，document.body.firstChild）但这不起作用。它将所有div放在同一个位置。请注意，prepend（）atm是实验性的，因为该页面明确指出，可能无法跨浏览器工作。检查@yezzz-ah，你是对的-一定错过了。Polyfill for IE9+@yezzz不喜欢jQuery-我不推荐它。好吧，每个人都有自己的偏好，但如果我已经加载了一些可以执行此任务的内容，我不想在我的页面中添加Polyfill。对不起，我可能只会使用jQuery，没有其他：/Be aware prepend（）atm是实验性的，因为该页面明确指出，可能无法跨浏览器工作。检查@yezzz-ah，你是对的-一定错过了。IE9+@yezzz的Polyfill不喜欢jQuery-我不推荐它。好吧，每个人都有自己的偏好，但如果我已经加载了一些可以执行此任务的东西，我不想在我的页面中添加Polyfill。对不起，我可能只使用jQuery，其他什么都不想：/