innerText innerHTML outerHTML textContent JavaScript EcmaScript HTML
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-
XXIV
innerText-innerHTML-outerHTML-textContent
- 1 / 9 mardi, 7. mai 2019 (5:26 )
Les Propriétés
innerText – innerHTML
- outerHTML - textContent
JAVASCRIPT (Programmation Internet) VOL. XXIV
J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
+243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818
I. LES BALISES HTML :
Les éléments HTML existent sous deux moutures : à balise ouverte (<br />, <input />,
<img />…) et à balise fermée qui exigent leur pair fermante (<div></div>,
<quote></quote>, <html></html>…).
On peut accéder ou modifier le contenu des balises fermées via leurs propriétés intrin-
sèques : « innerHTML », « outerHTML », « innerText », « textContent ».
« el.innerHTML » comme membre de gauche (+=)
(assignment left-hand side)
1. conserve le code de formatage du texte
2. utilise le <\br> pour le retour de ligne
« el.innerHTML » ou « el.textContent » comme membre de droite
(assignment right-hand side)
1. reconnaît et utilise les balises HTML
2. conserve le code de formatage du texte
« el.outerHTML » comme membre de droite
(assignment right-hand side)
1. retient tout l'élément (les deux balises HTML et le contenu)
2. conserve le code de formatage du texte
« el.outerHTML » comme membre de gauche
(assignment left-hand side)
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-
XXIV
innerText-innerHTML-outerHTML-textContent
- 2 / 9 mardi, 7. mai 2019 (5:26 )
1. remplace, naturellement, tout l'élément (les deux balises HTML et le contenu) par le
texte spécifié (à ne faire que si vraiment nécessaire), et
2. conserve le code de formatage du texte affecté
« el.innerText » comme membre de droite
(assignment right-hand side)
1. Ne lit que le texte utile
2. Ignore (saute, rejette, escamote) les balises HTML
3. Ignore les codes de formatage du texte
« el.innerText » comme membre de gauche (+=)
(assignment left-hand side)
Prend le texte en brut
rejette tous les codes de formatage même pour des textes saisis avant, avec «
el.innerHTML » comme ici, et EMPÊCHE DE FRECONNAÎTRE TOUT ÉLÉMENT (BALISE)
HTML, comme le < hr > mais accepte le < br >.
Pour le retour à la ligne, utilisez le caractère d'échappement « \n » à la place de la balise
< br >.
Bien entendu, le respect des formats ne se fait que dans les éléments qui acceptent le
formatage de textes (<p>, </div>, etc), pas par exemple dans le <textarea> ou le <in-
put>…
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-
1252" />
<base target="_top">
<title>innerText innerHTML outerHTML textContent</title>
<meta content="30 days" name=Revisit-after>
<meta name=ROBOTS content="INDEX,FOLLOW">
<meta http-equiv=Page-Enter content="RevealTrans(Duration=3,Transition=23)">
<meta http-equiv=Page-Exit content="RevealTrans(Duration=3,Transition=23)">
<meta http-equiv=Content-Language content=fr-be>
<meta name=Title content="Propriétés innerText innerHTML outerHTML textCon-
tent|Informatique">
<meta name=Created content="Mardi 07 mai 2019 - 09:08:28 (AM)">
<meta name=Modified content="Mardi 07 mai 2019 - 13:31:22 (PM)">
<meta name=description content="Les propriétés innerText innerHTML outerHTML
textContent">
<meta name=keywords content="machine à vo-
ter,vote,élections,scrutin,urnes,candidat,postulant,prétendant,candidats,postula
nts,prétendants,scruter">
<meta name="author" content="Dr. Jean-Baptiste Dadet DIASOLUKA Nzoyifuanga
Luyalu (CNOM : 0866) - Ophtalmologiste">
<meta name="license" content="gratuit">
<meta name="author-address" content="[email protected]">
<meta name="author-site" content="http://diasmath.blogg.org">
<meta name="author-site2" content="http://www.amessi.org/diasoluka">
<meta name="author-site3" content="https://www.vk.com/diasoluyalu">
<style>
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-
XXIV
innerText-innerHTML-outerHTML-textContent
- 3 / 9 mardi, 7. mai 2019 (5:26 )
div{
width:450;border:solid 1pt;
margin-bottom:30pt;padding:5pt}
</style>
</head>
<body>
<div class="ndiv">
<b>Bold <u>Souligné</u></b> Normal
</div>
<div class="test" onclick="frepl()">
<b>Bold <u>Souligné</u></b> Normal
</div>
NHTML<br>
<div id="nhtml">
</div>
NTEXT<br>
<div id="ntext">
</div>
</body>
<script type = "text/javascript"> "use strict";
const el=document.querySelector(".ndiv");
const nhtml=document.getElementById("nhtml");
const ntxt=document.getElementById("ntext");
const test=document.querySelector(".test");
nhtml.innerHTML+=
`<b>« el.innerHTML » comme <i>membre de <u>gauche</u></i>
(+=)</b><br>(assignment left-hand side)<ol>`+
`<li>conserve le code de formatage du texte`+
`<li>utilise le < br > pour le retour de ligne</ol>`+
`<b>« el.innerHTML » ou « el.textContent » comme <i>membre de
<u>droite</u></i></b><br>(assignment right-hand side)<ol>`+
`<li>reconnaît et utilise les balises HTML`+
`<li>conserve le code de formatage du texte</ol>`+
`<b>« el.outerHTML » comme <i>membre de <u>droite</u></i></b><br>(assignment
right-hand side)<ol>`+
`<li>retient tout l'élément (les deux balises HTML et le contenu)`+
`<li>conserve le code de formatage du texte</ol>`+
`<b>« el.outerHTML » comme <i>membre de <u>gauche</u></i></b><br>(assignment
left-hand side)<ol>`+
`<li>remplace, naturellement, tout l'élément (les deux balises HTML et le con-
tenu) par le texte spécifié (à ne faire que si vraiment nécessaire), et`+
`<li>conserve le code de formatage du texte affecté</ol>`+
`<b>« el.innerText » comme <i>membre de <u>droite</u></i></b><br>(assignment
right-hand side)<ol>`+
`<li>Ne lit que le texte utile`+
`<li>Ignore (saute, rejette, escamote) les balises HTML`+
`<li>Ignore les codes de formatage du texte</ol><hr>`;
nhtml.innerHTML+= `1. nhtml.innerHTML+=el.innerHTML= ${el.innerHTML}<br>`;
nhtml.innerHTML+= `2. nhtml.innerHTML+=el.innerText= ${el.innerText}<br>`;
nhtml.innerHTML+= `3. nhtml.innerHTML+=el.innerHTML= ${el.innerHTML}<br>`;
nhtml.innerHTML+= `4. nhtml.innerHTML+=el.innerText= ${el.innerText}<br>`;
nhtml.innerHTML+= `5. nhtml.textContent+=el.innerText= ${el.textContent}<br>`;
nhtml.innerHTML+= `6. nhtml.outerHTML+=el.innerText= ${el.outerHTML}`;
ntext.innerHTML+=
`<b>« el.innerText » comme <i>membre de <u>gauche</u></i>
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-
XXIV
innerText-innerHTML-outerHTML-textContent
- 4 / 9 mardi, 7. mai 2019 (5:26 )
(+=)</b><br>(assignment left-hand side)<br><ol>`+
`<li>Prend le texte en brut<li>rejette tous les codes de formatage même pour
des textes saisis avant, avec « el.innerHTML » comme ici, et EMPÊCHE DE FRECON-
NAÎTRE TOUT ÉLÉMENT (BALISE) HTML, comme le < hr > mais accepte le < br
>.<br><li>Pour le retour à la ligne, utilisez le caractère d'échappement « \\n »
à la place de la balise < br >.<br>${"=".repeat(50)}<br>`;
ntext.innerText+= `7. ntext.innerText+= el.innerHTML= ${el.innerHTML}\n`;
ntext.innerText+= `8. ntext.innerText+= el.innerText= ${el.innerText}\n\n`;
ntext.innerText+= `9. ntext.innerText+= el.innerHTML= ${el.innerHTML}\n`;
ntext.innerText+= `10. ntext.innerText+= el.innerHTML= ${el.innerHTML}\n`;
ntext.innerText+= `11. ntext.innerText+= el.innerText= ${el.innerText}\n\n`;
ntext.innerText+= `12. ntext.innerText+= el.innerText= ${el.innerText}`;
function frepl(){
test.outerHTML=
`13. test.outerHTML= nhtml.outerHTML= `+
`<strike>${nhtml.outerHTML}</strike>\n`;
}
</script>
</html>
Exécution :
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-
XXIV
innerText-innerHTML-outerHTML-textContent
- 5 / 9 mardi, 7. mai 2019 (5:26 )
6
7
8
9
1
/
9
100%
