Question

例如，有以下页面：

<html>
  <head>
    <style>
      .a {
        background-color: red;
      }
      .b {
        background-color: yellow;
      }
    </style>
  </head>
  <body>

    <div class="a">123</div>

    <div>456</div>

    <script>
      var banner = document.createElement("div");
      banner.className = "b";
      banner.innerHTML = "Banner Content";

      var content = document.getElementsByClassName("a")[0];
      content.parentNode.insertBefore(banner, content);
    </script>
  </body>
</html>

如您所见，我只是在第一页项目之前添加'banner'div。但是这个代码并不普遍;如果项目是绝对定位的，我的代码不起作用。我需要创建一些JS，它会在页面内容之前为每种情况添加“banner”div。可能吗？提前谢谢！

Answer 1

更新了，以便在正文中添加@Quentin评论

您可以使用document.body在每个元素之前插入div，例如

var banner = document.createElement("div");
banner.className = "b";
banner.innerHTML = "Banner Content";

document.body.insertBefore(banner,document.body.childNodes[0]);

.a {
  background-color: red;
}
.b {
  background-color: yellow;
}

<div class="a">123</div>

<div>456</div>

Answer 2

使用insertAdjacentHTML，第一个参数确定与目标元素相关的位置（例如，身体的第一个孩子是afterbegin）。第二个参数是将要呈现为要插入的HTML的字符串（例如<div class="b">Banner Content</div>）。

第一个参数必须是以下之一：

＆＃39; beforebegin＆＃39;：在元素本身之前。
＆＃39; afterbegin＆＃39; ：就在元素内部，在第一个孩子面前。
＆＃39; beforeend＆＃39; ：就在元素里面，在它的最后一个孩子之后。
＆＃39; afterend＆＃39; ：元素本身之后。

段

＆＃13;

var target = document.body;

target.insertAdjacentHTML("afterbegin", "<div class='b'>Banner Content</div>");

＆＃13;

<html>

<head>
  <style>
    .a {
      background-color: red;
    }
    .b {
      background-color: yellow;
    }
  </style>
</head>

<body>

  <div class="a">123</div>

  <div>456</div>

</body>

</html>

＆＃13;

如何使用JS在每个页面内容之前添加div横幅？

2 个答案:

段