From 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:24 +0200 Subject: convert content to md --- files/fr/web/api/element/innerhtml/index.md | 226 ++++++++++++++-------------- 1 file changed, 110 insertions(+), 116 deletions(-) (limited to 'files/fr/web/api/element/innerhtml/index.md') diff --git a/files/fr/web/api/element/innerhtml/index.md b/files/fr/web/api/element/innerhtml/index.md index 91ab29da37..8fe3f15e3b 100644 --- a/files/fr/web/api/element/innerhtml/index.md +++ b/files/fr/web/api/element/innerhtml/index.md @@ -10,154 +10,162 @@ tags: translation_of: Web/API/Element/innerHTML original_slug: Web/API/Element/innertHTML --- -
{{APIRef("DOM")}}
+{{APIRef("DOM")}} -

La propriété Element.innerHTML de {{domxref("Element")}} récupère ou définit la syntaxe HTML décrivant les descendants de l'élément.

+La propriété **`Element.innerHTML`** de {{domxref("Element")}} récupère ou définit la syntaxe HTML décrivant les descendants de l'élément. -
-

Note : Si un nœud {{HTMLElement("div")}}, {{HTMLElement("span")}}, ou {{HTMLElement("noembed")}} a un sous-nœud de type texte contenant les caractères (&), (<), ou (>), innerHTML renverra à la place les chaînes suivantes : "&amp;", "&lt;" et "&gt;" respectivement. Utilisez {{domxref("Node.textContent")}} pour obtenir une copie exacte du contenu de ces nœuds.

-
+> **Note :** Si un nœud {{HTMLElement("div")}}, {{HTMLElement("span")}}, ou {{HTMLElement("noembed")}} a un sous-nœud de type texte contenant les caractères `(&), (<),` ou `(>)`, `innerHTML` renverra à la place les chaînes suivantes : `"&"`, `"<"` et `">"` respectivement. Utilisez {{domxref("Node.textContent")}} pour obtenir une copie exacte du contenu de ces nœuds. -

Pour insérer le HTML dans le document, plutôt que de remplacer le contenu d'un élément, utilisez la méthode {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.

+Pour insérer le HTML dans le document, plutôt que de remplacer le contenu d'un élément, utilisez la méthode {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}. -

Syntaxe

+## Syntaxe -
const content = element.innerHTML;
+    const content = element.innerHTML;
 
-element.innerHTML = htmlString;
-
+ element.innerHTML = htmlString; -

Valeur

+### Valeur -

Une  {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de innerHTML supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne htmlString.

+Une  {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de `innerHTML` supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne `htmlString`. -

Exceptions

+### Exceptions -
-
SyntaxError
-
Une tentative a été faite de définir la valeur de innerHTML en utilisant une chaîne qui n'est pas correctement formée HTML.
-
NoModificationAllowedError
-
Une tentative a été faite d'insérer le code HTML dans un noeud dont le parent est un {{domxref("Document")}}.
-
+- `SyntaxError` + - : Une tentative a été faite de définir la valeur de `innerHTML` en utilisant une chaîne qui n'est pas correctement formée HTML. +- `NoModificationAllowedError` + - : Une tentative a été faite d'insérer le code HTML dans un noeud dont le parent est un {{domxref("Document")}}. -

Notes d'utilisation

+## Notes d'utilisation -

La propriété innerHTML peut être utilisée pour examiner la source HTML actuelle de la page, y compris tous les changements réalisés depuis son chargement initial.

+La propriété `innerHTML` peut être utilisée pour examiner la source HTML actuelle de la page, y compris tous les changements réalisés depuis son chargement initial. -

Lecture du contenu HTML d'un élément

+### Lecture du contenu HTML d'un élément -

La lecture de innerHTML amène l'agent utilisateur à sérialiser le fragment HTML ou XML composé des descendants de l'élément. La chaîne résultante est renvoyée.

+La lecture de `innerHTML` amène l'agent utilisateur à sérialiser le fragment HTML ou XML composé des descendants de l'élément. La chaîne résultante est renvoyée. -
let contents = myElement.innerHTML;
+```js +let contents = myElement.innerHTML; +``` -

Cela vous permet de regarder le balisage HTML des nœuds de contenu de l'élément.

+Cela vous permet de regarder le balisage HTML des nœuds de contenu de l'élément. -
-

Note : Le fragment HTML ou XML renvoyé est généré en fonction du contenu actuel de l'élément. Il est donc probable que le balisage et la mise en forme du fragment renvoyé ne correspondent pas au balisage de la page d'origine.

-
+> **Note :** Le fragment HTML ou XML renvoyé est généré en fonction du contenu actuel de l'élément. Il est donc probable que le balisage et la mise en forme du fragment renvoyé ne correspondent pas au balisage de la page d'origine. -

Remplacement du contenu d'un élément

+### Remplacement du contenu d'un élément -

Définir la valeur de innerHTML vous permet de remplacer aisément le contenu existant d'un élément par un nouveau contenu.

+Définir la valeur de `innerHTML` vous permet de remplacer aisément le contenu existant d'un élément par un nouveau contenu. -

Par exemple, vous pouvez effacer le contenu entier du document en effaçant le contenu de l'attribut {{domxref("Document.body", "body")}} du document.

+Par exemple, vous pouvez effacer le contenu entier du document en effaçant le contenu de l'attribut {{domxref("Document.body", "body")}} du document. -
document.body.innerHTML = "";
+```js +document.body.innerHTML = ""; +``` -

Cet exemple récupère le balisage HTML actuel du document et remplace les caractères "<" par l'entité HTML "& lt;", convertissant ainsi essentiellement le code HTML en texte brut. Ceci est ensuite inclus dans un élément {{HTMLElement ("pre")}}. Puis, la valeur de innerHTML est modifiée dans cette nouvelle chaîne. Par conséquent, le contenu du document est remplacé par un affichage du code source entier de la page.

+Cet exemple récupère le balisage HTML actuel du document et remplace les caractères `"<"` par l'entité HTML `"& lt;"`, convertissant ainsi essentiellement le code HTML en texte brut. Ceci est ensuite inclus dans un élément {{HTMLElement ("pre")}}. Puis, la valeur de `innerHTML` est modifiée dans cette nouvelle chaîne. Par conséquent, le contenu du document est remplacé par un affichage du code source entier de la page. -
document.documentElement.innerHTML = "<pre>" +
-         document.documentElement.innerHTML.replace(/</g,"&lt;") +
-            "</pre>";
+```js +document.documentElement.innerHTML = "
" +
+         document.documentElement.innerHTML.replace(/";
+```
 
-
Détails opérationnels

+#### Détails opérationnels
 
-
Qu'arrive-t-il exactement quand vous définissez la valeur de innerHTML ?  Cela entraîne l'agent utilisateur à suivre ces étapes :

+Qu'arrive-t-il exactement quand vous définissez la valeur de `innerHTML` ?  Cela entraîne l'agent utilisateur à suivre ces étapes :
 
-
    
- 
  1. La valeur spécifiée est analysée en HTML ou XML (en fonction du type de document), ce qui donne un objet {{domxref ("DocumentFragment")}} représentant le nouvel ensemble de nœuds DOM pour les nouveaux éléments.
    2. 
- 
  2. Si l'élément dont le contenu est remplacé est un élément {{HTMLElement ("template")}}, l'attribut {{domxref ("HTMLTemplateElement.content", "content")}} de l'élément <template> est remplacé par le nouveau DocumentFragment créé à l'étape 1.
    3. 
- 
  3. Pour tous les autres éléments, le contenu de l'élément est remplacé par les noeuds du nouveau DocumentFragment.
    4. 
-

+1.  La valeur spécifiée est analysée en HTML ou XML (en fonction du type de document), ce qui donne un objet {{domxref ("DocumentFragment")}} représentant le nouvel ensemble de nœuds DOM pour les nouveaux éléments.
+2.  Si l'élément dont le contenu est remplacé est un élément {{HTMLElement ("template")}}, l'attribut {{domxref ("HTMLTemplateElement.content", "content")}} de l'élément `