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!
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
2 Answers
Reset to default 3Updated 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>