{"id":5690,"date":"2024-08-29T02:44:23","date_gmt":"2024-08-29T02:44:23","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/modifier-elements-dom-js-textcontent-innerhtml\/"},"modified":"2024-08-29T02:44:27","modified_gmt":"2024-08-29T02:44:27","slug":"modifier-elements-dom-js-textcontent-innerhtml","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/modifier-elements-dom-js-textcontent-innerhtml\/","title":{"rendered":"12.4 Modifier \u00c9l\u00e9ments DOM en JavaScript : textContent, innerHTML"},"content":{"rendered":"\n<p><strong>Modifier les \u00e9l\u00e9ments DOM en JavaScript<\/strong> est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur web. Ma\u00eetriser comment utiliser <code>textContent<\/code> et <code>innerHTML<\/code> permet de dynamiser l&rsquo;interface utilisateur en temps r\u00e9el. Apprenez comment tirer parti de ces propri\u00e9t\u00e9s avec des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>textContent<\/strong> et <strong>innerHTML<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/658890730?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>En JavaScript, les propri\u00e9t\u00e9s <strong><code>textContent<\/code><\/strong> et <strong><code>innerHTML<\/code><\/strong> permettent de modifier le contenu des \u00e9l\u00e9ments DOM. Bien que similaires, elles ont des distinctions importantes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de <code>textContent<\/code><\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>textContent<\/code> est utilis\u00e9e pour d\u00e9finir ou obtenir le texte \u00e0 l&rsquo;int\u00e9rieur d&rsquo;un \u00e9l\u00e9ment. Elle ne traite que de texte brut, ignorant tout code HTML inclus.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ S\u00e9lectionner un \u00e9l\u00e9ment DOM\nconst exampleElement = document.querySelector('#example');\n\n\/\/ Changer le contenu texte\nexampleElement.textContent = 'Nouveau texte au format brut';\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de <code>innerHTML<\/code><\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>innerHTML<\/code> permet d&rsquo;injecter du HTML dans un \u00e9l\u00e9ment. Cela signifie que vous pouvez ajouter des balises HTML, des scripts ou d&rsquo;autres types de contenu HTML.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ S\u00e9lectionner un \u00e9l\u00e9ment DOM\nconst exampleElement = document.querySelector('#example');\n\n\/\/ Changer le contenu HTML\nexampleElement.innerHTML = '&lt;strong&gt;Texte fort avec &lt;em&gt;emphase&lt;\/em&gt;&lt;\/strong&gt;';\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Diff\u00e9rences et Utilisations Appropri\u00e9es<\/h3>\n\n\n\n<p>Il est important de savoir quand utiliser <code>textContent<\/code> ou <code>innerHTML<\/code> :<\/p>\n<ul>\n  <li><strong><code>textContent<\/code>:<\/strong> Utilisez-le lorsque vous ne souhaitez manipuler que du texte brut. C&rsquo;est plus s\u00e9curis\u00e9 car il ne traite pas de HTML, r\u00e9duisant ainsi les risques d&rsquo;injections malveillantes.<\/li>\n  <li><strong><code>innerHTML<\/code>:<\/strong> Utilisez-le lorsque vous devez ins\u00e9rer des balises HTML ou structurer le contenu \u00e0 l&rsquo;int\u00e9rieur de l&rsquo;\u00e9l\u00e9ment. Soyez prudent avec les donn\u00e9es non-sanitized pour \u00e9viter les attaques XSS (Cross-Site Scripting).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple Pratique : Mise \u00e0 Jour Dynamique de Contenu<\/h3>\n\n\n\n<p>Voyons comment ces propri\u00e9t\u00e9s peuvent \u00eatre utilis\u00e9es dans un sc\u00e9nario r\u00e9el. Imaginons que nous avons une section de notre page o\u00f9 nous affichons les commentaires des utilisateurs. Suivant la m\u00e9thode que vous utilisez, consultez les exemples ci-dessous.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation de <code>textContent<\/code><\/h4>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const commentSection = document.querySelector('#comments');\n\n\/\/ Exemple d'utilisateur commentant\nconst userComment = \"Merci pour cet excellent tutoriel !\";\n\n\/\/ Mise \u00e0 jour du commentaire en utilisant textContent\ncommentSection.textContent = userComment;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation de <code>innerHTML<\/code><\/h4>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const commentSection = document.querySelector('#comments');\n\n\/\/ Exemple d'utilisateur commentant avec HTML\nconst userComment = \"&lt;strong&gt;Merci&lt;\/strong&gt; pour cet excellent tutoriel !\";\n\n\/\/ Mise \u00e0 jour du commentaire en utilisant innerHTML\ncommentSection.innerHTML = userComment;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Best Practices et S\u00e9curit\u00e9<\/h3>\n\n\n\n<p>Lorsqu&rsquo;on modifie le DOM avec <code>innerHTML<\/code>, il est crucial de prendre en compte la s\u00e9curit\u00e9 :<\/p>\n<ul>\n  <li>Sanitiser les entr\u00e9es utilisateur pour \u00e9viter les attaques XSS.<\/li>\n  <li>Favoriser <code>textContent<\/code> lorsque le contenu HTML n&rsquo;est pas n\u00e9cessaire.<\/li>\n  <li>Utiliser des biblioth\u00e8ques comme DOMPurify pour nettoyer les contenus HTML.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La maitrise des propri\u00e9t\u00e9s <strong>textContent<\/strong> et <strong>innerHTML<\/strong> est incontournable pour un d\u00e9veloppement web dynamique et s\u00e9curitaire. En utilisant judicieusement ces deux techniques, vous pouvez am\u00e9liorer de mani\u00e8re significative l&rsquo;interactivit\u00e9 et l&rsquo;exp\u00e9rience utilisateur de vos applications web.<\/p>\n\n\n\n<p>Pour approfondir vos connaissances, n&rsquo;oubliez pas de consulter nos ressources sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\" target=\"_blank\" rel=\"noopener\">Qu&rsquo;est-ce que JavaScript<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript\" target=\"_blank\" rel=\"noopener\">les Variables en JavaScript<\/a>. Vous pourrez \u00e9galement d\u00e9couvrir des tutoriels pratiques sur <a href=\"https:\/\/wikiform.fr\/codespace\/afficher-une-information-en-javascript\" target=\"_blank\" rel=\"noopener\">comment afficher une information en JavaScript<\/a> ou encore <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-fonction-en-javascript\" target=\"_blank\" rel=\"noopener\">ce qu&rsquo;est une fonction en JavaScript<\/a>. Pour les d\u00e9veloppeurs plus avanc\u00e9s, il est recommand\u00e9 de se pencher sur l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-du-debogueur-en-javascript\" target=\"_blank\" rel=\"noopener\">utilisation du d\u00e9bogueur en JavaScript<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n\n\n\n<p>Pour en apprendre plus, n&rsquo;h\u00e9sitez pas \u00e0 consulter notre <a href=\"https:\/\/wikiform.fr\/codespace\/apprendre-javascript-les-fondamentaux-tutoriel\" target=\"_blank\" rel=\"noopener\">tutoriel complet sur JavaScript<\/a> ou suivez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\">formation JavaScript<\/a> pour approfondir vos comp\u00e9tences.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JAVASCRIPT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Modifier les \u00e9l\u00e9ments DOM en JavaScript est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur web. Ma\u00eetriser comment utiliser textContent et innerHTML permet de dynamiser l&rsquo;interface utilisateur&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2888,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5690","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-4-javascript","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5690","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5690"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5690\/revisions"}],"predecessor-version":[{"id":5691,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5690\/revisions\/5691"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2888"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}