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

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>

Share Improve this question asked Jul 12, 2016 at 6:40 malcoauri 12.2k28 gold badges88 silver badges141 bronze badges

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

Sorted by: 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:

'beforebegin': Before the element itself.
'afterbegin' : Just inside the element, before its first child.
'beforeend' : Just inside the element, after its last child.
'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>

Programmer puzzle solving

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

2 Answers 2

SNIPPET

Articles related to this article

comment list (0)