2. Algorithm
  3. javascript - How to add div banner before every page content using JS? - Stack Overflow

javascript - How to add div banner before every page content using JS? - Stack Overflow

admin2025-04-26  1

For example, there is the following page:

<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>

As you can see, I just add 'banner' div before first page item. But this code isn't universal; if items are absolute positioned, my code doesn't work. I need to create some JS which will add 'banner' div before page content for every situation. Is it possible? Thanks in advance!

For example, there is the following page:

<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>

As you can see, I just add 'banner' div before first page item. But this code isn't universal; if items are absolute positioned, my code doesn't work. I need to create some JS which will add 'banner' div before page content for every situation. Is it possible? Thanks in advance!

  • javascript
  • html
  • css
Share Improve this question asked Jul 12, 2016 at 6:40 malcoaurimalcoauri 12.2k28 gold badges88 silver badges141 bronze badges 1
  • 1 Have you thought prepending it to document.body? – Roko C. Buljan Commented Jul 12, 2016 at 6:42
Add a ment  | 

2 Answers 2

Reset to default 3

Updated for prepend in body as on @Quentin ment

You can use document.body to insert the div before every element like, 

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>

Use insertAdjacentHTML, the first parameter determines position in relation to the target element (e.g. first child of body is afterbegin). The second parameter is the string that will be rendered as HTML to be inserted (e.g. <div class="b">Banner Content</div>).

The first parameter must be one of the following:

  1. 'beforebegin': Before the element itself.
  2. 'afterbegin' : Just inside the element, before its first child.
  3. 'beforeend' : Just inside the element, after its last child.
  4. 'afterend' : After the element itself.

SNIPPET

var target = document.body;

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

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

<body>

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

  <div>456</div>

</body>

</html>

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745631465a311042.html

javascriptHow to add div banner before every page content using JSStack Overflow

最新回复(0)