From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../api/element/insertadjacentelement/index.html | 127 +++++++++++++++++++++ 1 file changed, 127 insertions(+) create mode 100644 files/fr/web/api/element/insertadjacentelement/index.html (limited to 'files/fr/web/api/element/insertadjacentelement') diff --git a/files/fr/web/api/element/insertadjacentelement/index.html b/files/fr/web/api/element/insertadjacentelement/index.html new file mode 100644 index 0000000000..2597358d00 --- /dev/null +++ b/files/fr/web/api/element/insertadjacentelement/index.html @@ -0,0 +1,127 @@ +--- +title: Element.insertAdjacentElement() +slug: Web/API/Element/insertAdjacentElement +tags: + - API + - DOM + - Element + - Insertion + - Méthodes +translation_of: Web/API/Element/insertAdjacentElement +--- +

{{APIRef("DOM")}}

+ +

La méthode insertAdjacentElement() insère un noeud d'élément donné à une position donnée par rapport à l'élément sur lequel il est appelé.

+ +

Syntaxe

+ +
targetElement.insertAdjacentElement(position, element);
+ +

Paramètres

+ +
+
position
+
Un objet {{domxref("DOMString")}} (chaîne de caractères) représentant la position par rapport à targetElement ; cela doit correspondre ( sans prendre en compte la casse ) à une des chaînes suivantes : +
    +
  • 'beforebegin' : Avant targetElement lui-même.
    • +
  • 'afterbegin' : A l'intérieur de targetElement, avant son premier enfant.
    • +
  • 'beforeend' : A l'intérieur de targetElement, après son dernier enfant.
    • +
  • 'afterend' : Après targetElement lui-même.
    • +
+
+
element
+
L'élément à insérer dans l'arbre.
+
+ +

Valeur retournée

+ +

L'élément inséré ou null si l'insertion a échouée.

+ +

Exceptions

+ + + + + + + + + + + + + + + + + + +
ExceptionExplications
SyntaxErrorLa position donnée n'est pas une valeur reconnue.
TypeErrorL'element spécifié n'est pas un élément valide.
+ +

Visualisation des positionnements

+ +
<!-- beforebegin -->
+<p>
+<!-- afterbegin -->
+foo
+<!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
Note : Les positions beforebegin et afterend ne fonctionnent que si le noeud est dans l'arbre et s'il possède un élément parent.
+ +

Exemple

+ +
beforeBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  if (activeElem) {
+    activeElem.insertAdjacentElement('beforebegin',tempDiv);
+  }
+  setListener(tempDiv);
+});
+
+afterBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  if (activeElem) {
+    activeElem.insertAdjacentElement('afterend',tempDiv);
+  }
+  setListener(tempDiv);
+});
+ +

Une démo de notre insertAdjacentElement.html est disponible sur Github ( avec le code source ). Nous avons un ensemble d'éléments {{htmlelement("div")}} dans un conteneur. Quand un élément reçoit un clic, il est sélectionné et vous pouvez appuyer sur les boutons Insert before (insérer avant) et Insert after (insérer après) pour insérer de nouveaux divs avant ou après l'élement sélectionné en utilisant insertAdjacentElement().

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}}{{ Spec2('DOM WHATWG') }}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Element.insertAdjacentElement")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf