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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
---
title: Element.insertAdjacentText()
slug: Web/API/Element/insertAdjacentText
tags:
- API
- DOM
- Element
- Insertion
- Méthodes
- Texte
translation_of: Web/API/Element/insertAdjacentText
---
<p>{{APIRef("DOM")}}</p>
<p>La méthode <code>insertAdjacentText()</code> insère un noeud texte donné à une position donnée par rapport à l'élément sur lequel elle est appelé.</p>
<h2 id="Syntax">Syntaxe</h2>
<pre><em>element</em>.insertAdjacentText(<em>position</em>, <em>element</em>);</pre>
<h3 id="Paramètres">Paramètres</h3>
<dl>
<dt>position</dt>
<dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la position par rapport à l'<code>element</code> ; elle doit être l'une des chaînes suivantes :
<ul>
<li><code>'beforebegin'</code> : avant l'<code>element</code> lui-même ;</li>
<li><code>'afterbegin'</code> : à l'intérieur de l'<code>element</code>, avant son premier enfant ;</li>
<li><code>'beforeend'</code> : à l'intérieur de l'<code>element</code>, avant son dernier enfant ;</li>
<li><code>'afterend'</code> : après l'<code>element</code> lui-même.</li>
</ul>
</dd>
<dt>element</dt>
<dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant le texte à insérer dans l'arbre.</dd>
</dl>
<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
<p>Vide.</p>
<h3 id="Exceptions">Exceptions</h3>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Exception</th>
<th scope="col">Explication</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>SyntaxError</code></td>
<td>La <code>position</code> indiquée n'est pas une valeur reconnue.</td>
</tr>
</tbody>
</table>
<h3 id="Visualisation_des_noms_de_position">Visualisation des noms de position</h3>
<pre><!-- beforebegin -->
<p>
<!-- afterbegin> -->
machin
<!-- beforeend -->
</p>
<!-- afterend --></pre>
<div class="note">
<p><strong>Note :</strong> Les positions <code>beforebegin</code> et <code>afterend</code> ne fonctionnent que si le noeud est dans l'arbre et possède un élément parent.</p>
</div>
<h2 id="Example">Exemple</h2>
<pre class="brush: js">beforeBtn.addEventListener('click', function() {
para.insertAdjacentText('afterbegin',textInput.value);
});
afterBtn.addEventListener('click', function() {
para.insertAdjacentText('beforeend',textInput.value);
});</pre>
<p>Jetez un œil à notre démo <a href="https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentText.html">insertAdjacentText.html</a> sur GitHub (voir le <a href="https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentText.html">code source</a> aussi). Ici, nous avons un simple paragraphe. Vous pouvez entrer du texte dans l'élément de formulaire, puis presser les boutons <em>Insert before</em> (<em>insère avant</em>) et <em>Insert after</em> (<em>insère après</em>) pour l'insérer avant ou après le texte de paragraphe existant en utilisant <code>insertAdjacentText()</code>. Notez que le nœud texte existant n'y est pas ajouté — d'autres nœuds de texte sont créés contenant le nouvel ajout.</p>
<h2 id="Émulation">Émulation</h2>
<p>Vous pouvez utiliser une émulation de la méthode <code>insertAdjacentText()</code> dans Internet Explorer 5.5 (et peut-être antérieur) et supérieur avec le code suivant :</p>
<pre>if (!Element.prototype.insertAdjacentText)
Element.prototype.insertAdjacentText = function(type, txt){
this.insertAdjacentHTML(
type,
(txt+'') // convertir en chaîne de caractères
.replace(/&/g, '&amp;') // intégrer des symboles d'esperluette
.replace(/</g, '&lt;') // intégrer les symboles "plus petit que"
)
}
</pre>
<h2 id="Specification">Spécification</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
<th scope="col">Commentaire</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('DOM WHATWG', '#dom-element-insertadjacenttext', 'insertAdjacentText()')}}</td>
<td>{{ Spec2('DOM WHATWG') }}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("api.Element.insertAdjacentText")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{domxref("Element.insertAdjacentElement()")}}</li>
<li>{{domxref("Element.insertAdjacentHTML()")}}</li>
</ul>
|
