{"id":5692,"date":"2024-08-29T02:48:29","date_gmt":"2024-08-29T02:48:29","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/ajouter-elements-au-dom-js-append-prepend\/"},"modified":"2025-01-09T16:21:26","modified_gmt":"2025-01-09T16:21:26","slug":"ajouter-elements-au-dom-js-append-prepend","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/ajouter-elements-au-dom-js-append-prepend\/","title":{"rendered":"12.5 Ajouter \u00c9l\u00e9ments au DOM en JavaScript : append, prepend"},"content":{"rendered":"\n\n\n<p><strong>Ajouter des \u00c9l\u00e9ments au DOM en JavaScript : append, prepend <\/strong> sont des m\u00e9thodes fondamentales pour la manipulation dynamique des \u00e9l\u00e9ments HTML. Ma\u00eetriser ces techniques vous permettra de construire des interfaces utilisateur dynamiques et r\u00e9actives. Explorons ensemble comment et quand utiliser <code>append<\/code> et <code>prepend<\/code> gr\u00e2ce \u00e0 des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>append<\/strong> et <strong>prepend<\/strong> en JavaScript<\/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\/658890968?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                    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();\n    }\n});\n<\/script>\n\n\n<p><!-- \/wp:post-content --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Le <strong>Document Object Model (DOM)<\/strong> est une interface de programmation pour les documents HTML et XML. Il repr\u00e9sente la structure de la page de mani\u00e8re hi\u00e9rarchique, permettant aux d\u00e9veloppeurs d&rsquo;acc\u00e9der et de manipuler son contenu de mani\u00e8re dynamique. <code>append<\/code> et <code>prepend<\/code> sont des m\u00e9thodes de l&rsquo;interface <code>Node<\/code> qui permettent d&rsquo;ajouter de nouveaux n\u0153uds \u00e0 un parent existant. Pour plus de d\u00e9tails, consultez notre article sur le <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-le-dom-en-javascript-explications\" target=\"_blank\" rel=\"noopener\">DOM en JavaScript<\/a>.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading {\"level\":3} --><\/p>\n<h3 class=\"wp-block-heading\">Introduction \u00e0 la M\u00e9thode <code>append<\/code><\/h3>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>La m\u00e9thode <code>append<\/code> permet d&rsquo;ajouter un ou plusieurs n\u0153uds \u00e0 la fin d&rsquo;un \u00e9l\u00e9ment parent. Voici un exemple simple :<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:code {\"className\":\"lang-javascript\"} --><\/p>\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ S\u00e9lectionner l'\u00e9l\u00e9ment parent\nconst parentElement = document.getElementById('parent');\n\n\/\/ Cr\u00e9er un nouvel \u00e9l\u00e9ment\nconst newElement = document.createElement('div');\nnewElement.textContent = 'Nouvel \u00e9l\u00e9ment';\n\n\/\/ Ajouter le nouvel \u00e9l\u00e9ment \u00e0 la fin de l'\u00e9l\u00e9ment parent\nparentElement.append(newElement);\n<\/code><\/pre>\n<p><!-- \/wp:code --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p> Pour en savoir plus sur la m\u00e9thode append et comment l&rsquo;utiliser de mani\u00e8re efficace, vous pouvez lire notre guide pratique sur <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-elements-au-dom-js-append-prepend\" target=\"_blank\" rel=\"noopener\">ajouter des \u00e9l\u00e9ments au DOM en JavaScript<\/a>.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading {\"level\":3} --><\/p>\n<h3 class=\"wp-block-heading\">Introduction \u00e0 la M\u00e9thode <code>prepend<\/code><\/h3>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>A contrario, la m\u00e9thode <code>prepend<\/code> ajoute un ou plusieurs n\u0153uds au d\u00e9but d&rsquo;un \u00e9l\u00e9ment parent. Consid\u00e9rons cet exemple :<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:code {\"className\":\"lang-javascript\"} --><\/p>\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ S\u00e9lectionner l'\u00e9l\u00e9ment parent\nconst parentElement = document.getElementById('parent');\n\n\/\/ Cr\u00e9er un nouvel \u00e9l\u00e9ment\nconst newElement = document.createElement('div');\nnewElement.textContent = 'Nouvel \u00e9l\u00e9ment';\n\n\/\/ Ajouter le nouvel \u00e9l\u00e9ment au d\u00e9but de l'\u00e9l\u00e9ment parent\nparentElement.prepend(newElement);\n<\/code><\/pre>\n<p><!-- \/wp:code --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Pour des exemples pratiques sur l&rsquo;utilisation de prepend, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-elements-au-dom-js-append-prepend\" target=\"_blank\" rel=\"noopener\">guide complet sur append et prepend en JavaScript<\/a>.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading {\"level\":3} --><\/p>\n<h3 class=\"wp-block-heading\">Utilisation Avanc\u00e9e de <code>append<\/code> et <code>prepend<\/code><\/h3>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Les m\u00e9thodes <code>append<\/code> et <code>prepend<\/code> acceptent \u00e9galement plusieurs n\u0153uds et du texte comme arguments. Cela les rend tr\u00e8s flexibles pour cr\u00e9er des interfaces utilisateur riches et dynamiques :<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:code {\"className\":\"lang-javascript\"} --><\/p>\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ S\u00e9lectionner l'\u00e9l\u00e9ment parent\nconst parentElement = document.getElementById('parent');\n\n\/\/ Cr\u00e9er de nouveaux \u00e9l\u00e9ments\nconst newElement1 = document.createElement('div');\nnewElement1.textContent = '\u00c9l\u00e9ment 1';\n\nconst newElement2 = document.createElement('div');\nnewElement2.textContent = '\u00c9l\u00e9ment 2';\n\n\/\/ Ajouter plusieurs \u00e9l\u00e9ments \u00e0 la fin de l'\u00e9l\u00e9ment parent\nparentElement.append(newElement1, newElement2, ' Texte suppl\u00e9mentaire');\n<\/code><\/pre>\n<p><!-- \/wp:code --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Pour explorer davantage les possibilit\u00e9s de l&rsquo;utilisation avanc\u00e9e de ces m\u00e9thodes, vous pouvez consulter notre tutoriel sur <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-elements-au-dom-js-append-prepend\" target=\"_blank\" rel=\"noopener\">Comment ajouter des \u00e9l\u00e9ments au DOM en JavaScript<\/a>.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading {\"level\":3} --><\/p>\n<h3 class=\"wp-block-heading\">Manipulation du DOM en Utilisant des \u00c9v\u00e9nements<\/h3>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Tr\u00e8s souvent, vous voudrez ajouter des \u00e9l\u00e9ments au DOM en r\u00e9ponse \u00e0 des \u00e9v\u00e9nements utilisateurs, tels que des clics de bouton :<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:code {\"className\":\"lang-javascript\"} --><\/p>\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ S\u00e9lectionner le parent et le bouton\nconst parentElement = document.getElementById('parent');\nconst addButton = document.getElementById('addButton');\n\n\/\/ Ajouter un \u00e9couteur d'\u00e9v\u00e9nement pour le clic\naddButton.addEventListener('click', () => {\n   \/\/ Cr\u00e9er un nouvel \u00e9l\u00e9ment\n   const newElement = document.createElement('div');\n   newElement.textContent = '\u00c9l\u00e9ment ajout\u00e9 en cliquant';\n\n   \/\/ Ajouter l'\u00e9l\u00e9ment au DOM\n   parentElement.append(newElement);\n});\n<\/code><\/pre>\n<p><!-- \/wp:code --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Pour conna\u00eetre plus de techniques avanc\u00e9es sur la gestion des \u00e9v\u00e9nements, lisez notre guide <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-propagation-evenements-en-javascript\" target=\"_blank\" rel=\"noopener\">G\u00e9rer la propagation des \u00e9v\u00e9nements en JavaScript<\/a>.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading {\"level\":3} --><\/p>\n<h3 class=\"wp-block-heading\">G\u00e9rer les Modifications du DOM en Utilisant les M\u00e9thodes <code>append<\/code> et <code>prepend<\/code><\/h3>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Il est crucial de g\u00e9rer les modifications du DOM efficacement, surtout dans les applications \u00e0 grande \u00e9chelle. Voici une approche pratique :<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:code {\"className\":\"lang-javascript\"} --><\/p>\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ S\u00e9lectionner les \u00e9l\u00e9ments n\u00e9cessaires\nconst parentElement = document.getElementById('parent');\nconst inputField = document.getElementById('inputField');\nconst appendButton = document.getElementById('appendButton');\nconst prependButton = document.getElementById('prependButton');\n\n\/\/ Fonction pour cr\u00e9er un nouvel \u00e9l\u00e9ment\nfunction createNewElement(text) {\n   const newElement = document.createElement('div');\n   newElement.textContent = text;\n   return newElement;\n}\n\n\/\/ \u00c9couteurs d'\u00e9v\u00e9nements pour les boutons\nappendButton.addEventListener('click', () => {\n   const newText = inputField.value;\n   parentElement.append(createNewElement(newText));\n});\n\nprependButton.addEventListener('click', () => {\n   const newText = inputField.value;\n   parentElement.prepend(createNewElement(newText));\n});\n<\/code><\/pre>\n<p><!-- \/wp:code --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Ce code ajoute de mani\u00e8re dynamique des \u00e9l\u00e9ments au DOM en utilisant les valeurs entr\u00e9es par l&rsquo;utilisateur. L&rsquo;utilisation de fonctions r\u00e9utilisables pour cr\u00e9er des \u00e9l\u00e9ments assure un code propre et maintenable. Pour aller plus loin, ne manquez pas notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/fonctions-anonymes-en-javascript-explications\" target=\"_blank\" rel=\"noopener\">les fonctions anonymes en JavaScript<\/a>.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading {\"level\":3} --><\/p>\n<h3 class=\"wp-block-heading\">Utilisation dans le Contexte des Applications R\u00e9actives<\/h3>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Dans les applications r\u00e9actives modernes, le besoin de manipuler le DOM de mani\u00e8re dynamique est fr\u00e9quemment rencontr\u00e9. Voici un exemple o\u00f9 nous utilisons <code>append<\/code> et <code>prepend<\/code> avec des donn\u00e9es r\u00e9cup\u00e9r\u00e9es d&rsquo;une API :<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:code {\"className\":\"lang-javascript\"} --><\/p>\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ S\u00e9lectionner l'\u00e9l\u00e9ment parent\nconst parentElement = document.getElementById('parent');\n\n\/\/ Fonction pour cr\u00e9er un nouvel \u00e9l\u00e9ment\nfunction createNewElement(text) {\n   const newElement = document.createElement('div');\n   newElement.textContent = text;\n   return newElement;\n}\n\n\/\/ Fetch des donn\u00e9es depuis une API\nfetch('https:\/\/api.example.com\/items')\n   .then(response => response.json())\n   .then(data => {\n       \/\/ Parcourir les donn\u00e9es et ajouter chaque \u00e9l\u00e9ment au parent\n       data.items.forEach(item => {\n           parentElement.append(createNewElement(item.name));\n       });\n   });\n<\/code><\/pre>\n<p><!-- \/wp:code --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Ce code illustre comment int\u00e9grer des donn\u00e9es externes au DOM en utilisant la m\u00e9thode <code>append<\/code>. Vous pouvez facilement adapter cette approche pour des m\u00e9thodes plus sp\u00e9cifiques \u00e0 vos besoins. Apprenez-en plus sur comment acc\u00e9der aux \u00e9l\u00e9ments du DOM en JavaScript <a href=\"https:\/\/wikiform.fr\/codespace\/acceder-aux-elements-du-dom-en-javascript\" target=\"_blank\" rel=\"noopener\">ici<\/a>.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading {\"level\":3} --><\/p>\n<h3 class=\"wp-block-heading\">Application dans un Projet R\u00e9el<\/h3>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Pour illustrer une application concr\u00e8te, consid\u00e9rons un projet o\u00f9 nous devons cr\u00e9er une liste de t\u00e2ches dynamiques. Les utilisateurs peuvent ajouter des t\u00e2ches en haut ou en bas de la liste :<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:code {\"className\":\"lang-javascript\"} --><\/p>\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ S\u00e9lectionner les \u00e9l\u00e9ments n\u00e9cessaires\nconst taskList = document.getElementById('taskList');\nconst taskInput = document.getElementById('taskInput');\nconst addTaskButton = document.getElementById('addTaskButton');\nconst prependTaskButton = document.getElementById('prependTaskButton');\n\n\/\/ Fonction pour cr\u00e9er un nouvel \u00e9l\u00e9ment de t\u00e2che\nfunction createTaskElement(task) {\n   const taskElement = document.createElement('li');\n   taskElement.textContent = task;\n   return taskElement;\n}\n\n\/\/ Ajouter une t\u00e2che \u00e0 la fin de la liste\naddTaskButton.addEventListener('click', () => {\n   const task = taskInput.value;\n   if (task) {\n       taskList.append(createTaskElement(task));\n       taskInput.value = ''; \/\/ Clear the input field\n   }\n});\n\n\/\/ Ajouter une t\u00e2che au d\u00e9but de la liste\nprependTaskButton.addEventListener('click', () => {\n   const task = taskInput.value;\n   if (task) {\n       taskList.prepend(createTaskElement(task));\n       taskInput.value = ''; \/\/ Clear the input field\n   }\n});\n<\/code><\/pre>\n<p><!-- \/wp:code --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>En poursuivant votre exploration de la manipulation du DOM avec JavaScript, vous pouvez consulter des ressources externes telles que <a href=\"https:\/\/developer.mozilla.org\/fr\/\" target=\"_blank\" rel=\"noopener\">MDN Web Docs<\/a> pour une documentation d\u00e9taill\u00e9e et des exemples de code. Vous pouvez \u00e9galement suivre des cours sur des plateformes comme <a href=\"https:\/\/www.udemy.com\/\" target=\"_blank\" rel=\"noopener\">Udemy<\/a> pour un apprentissage structur\u00e9.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Les m\u00e9thodes <code>append<\/code> et <code>prepend<\/code> de JavaScript sont puissantes pour ajouter des \u00e9l\u00e9ments au DOM de mani\u00e8re dynamique. En ma\u00eetrisant ces techniques, vous pouvez am\u00e9liorer significativement l&rsquo;interactivit\u00e9 de vos applications web. Continuez<\/p>","protected":false},"excerpt":{"rendered":"<p>Ajouter des \u00c9l\u00e9ments au DOM en JavaScript : append, prepend sont des m\u00e9thodes fondamentales pour la manipulation dynamique des \u00e9l\u00e9ments HTML. Ma\u00eetriser ces techniques vous&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2844,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5692","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\/5692","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=5692"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5692\/revisions"}],"predecessor-version":[{"id":6112,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5692\/revisions\/6112"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2844"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}