Comment ajouter une bannière div avant chaque contenu de page en utilisant JS?

Question

Comment ajouter une bannière div avant chaque contenu de page en utilisant JS?

Par exemple, il y a la page suivante:

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

Comme vous pouvez le voir, j'ajoute simplement 'banner' div avant l'élément de première page. Mais ce code n'est pas universel; si les éléments sont positionnés de manière absolue, mon code ne fonctionne pas. J'ai besoin de créer des JS qui ajouteront une div 'banner' avant le contenu de la page pour chaque situation. Est-il possible? Merci à l'avance!

1

French javascript html css

Author: malcoauri, 2016-07-12

Source

2 answers

score 2 · Answer 1

Mise à Jour pour ajouter dans le corps comme sur @Quentin commentaire

Vous pouvez utiliser document.body pour insérer la div avant chaque élément comme,

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>

score 2 · Answer 2

Utiliser insertAdjacentHTML, le premier paramètre détermine la position par rapport à l'élément cible (par exemple, premier enfant du corps est de afterbegin). Le deuxième paramètre est la chaîne qui sera rendue en HTML à insérer (par exemple <div class="b">Banner Content</div>).

Le premier paramètre doit être l'un des suivants:

'beforebegin': Avant l'élément lui-même.
'afterbegin' : Juste à l'intérieur de l'élément, avant son premier enfant.
'beforeend' : Juste à l'intérieur de l'élément, après son dernier enfant.
'afterend' : Après l'élément lui-même.

EXTRAIT

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>