blob: f13f332b6088caab5af8c8c7b5298abc1c677897 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
---
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
| Exception | Explications |
| ------------- | --------------------------------------------------- |
| `SyntaxError` | La `position` donnée n'est pas une valeur reconnue. |
| `TypeError` | L'`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
```js
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](https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentElement.html) est disponible sur Github ( avec le [code source](https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentElement.html) ). 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écification | Statut | Commentaire |
| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
| {{SpecName('DOM WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}} | {{ Spec2('DOM WHATWG') }} | |
## Compatibilité des navigateurs
{{Compat("api.Element.insertAdjacentElement")}}
## Voir aussi
- {{domxref("Element.insertAdjacentHTML()")}}
- {{domxref("Element.insertAdjacentText()")}}
- {{domxref("Node.insertBefore()")}}
- {{domxref("Node.appendChild()")}} ( même effet que `beforeend` )
|
