{"id":23231,"date":"2024-02-26T23:04:46","date_gmt":"2024-02-26T22:04:46","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/dom-como-insertar-elementos-en-el-dom-con-javascript\/"},"modified":"2024-06-03T18:44:09","modified_gmt":"2024-06-03T17:44:09","slug":"dom-como-insertar-elementos-en-el-dom-con-javascript","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/dom-how-to-insert-elements-into-the-dom-with-javascript\/","title":{"rendered":"DOM: How to insert elements into the DOM with Javascript"},"content":{"rendered":"<p>The DOM (Document Object Model) is a structured representation of the content of an HTML document that allows it to be manipulated from Javascript. One of the most common tasks when developing with Javascript is inserting elements into the DOM, either to add new elements to a web page or to modify existing ones. In this article, we will learn how to insert elements into the DOM using Javascript.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/dom-how-to-insert-elements-into-the-dom-with-javascript\/#Insercion_de_elementos_en_el_DOM_con_Javascript\" >Inserting elements into the DOM with Javascript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/dom-how-to-insert-elements-into-the-dom-with-javascript\/#1_createElement_y_appendChild\" >1. createElement and appendChild<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/dom-how-to-insert-elements-into-the-dom-with-javascript\/#2_insertBefore\" >2. insertBefore<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/dom-how-to-insert-elements-into-the-dom-with-javascript\/#3_insertAdjacentHTML\" >3. insertAdjacentHTML<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/dom-how-to-insert-elements-into-the-dom-with-javascript\/#Conclusiones\" >Conclusions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/dom-how-to-insert-elements-into-the-dom-with-javascript\/#Preguntas_frecuentes\" >Frequently asked questions<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Insercion_de_elementos_en_el_DOM_con_Javascript\"><\/span>Inserting elements into the DOM with Javascript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To insert elements into the DOM, we can use different methods and properties provided by Javascript. Below are some of the most common ways:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_createElement_y_appendChild\"><\/span>1. createElement and appendChild<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The createElement method allows us to create a new specific HTML element, while the appendChild method allows us to add said element to the DOM. Here is an example:<\/p>\n<pre>\n<code>\n\/\/ Create a new element <p>\nvar newParagraph = document.createElement(&quot;p&quot;); \/\/ Add the content to the new element newParagraph.textContent = &quot;This is a new paragraph.&quot;; \/\/ Get the parent element to which the new element is to be added var container = document.getElementById(&quot;container&quot;); \/\/ Add the new element to the DOM container.appendChild(newParagraph);\n<\/code>\n<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"2_insertBefore\"><\/span>2. insertBefore<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The insertBefore method allows us to insert a new element before an existing one in the DOM. Here is an example:<\/p>\n<pre>\n<code>\n\/\/ Create a new element <p>\nvar newParagraph = document.createElement(&quot;p&quot;); \/\/ Add the content to the new element newParagraph.textContent = &quot;This is a new paragraph.&quot;; \/\/ Get the existing element before which the new element is to be inserted var existingElement = document.getElementById(&quot;existing-element&quot;); \/\/ Get the parent element var container = existingElement.parentNode; \/\/ Insert the new element before the existing element container.insertBefore(newParagraph, existingElement);\n<\/code>\n<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"3_insertAdjacentHTML\"><\/span>3. insertAdjacentHTML<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The insertAdjacentHTML method allows us to insert HTML code into a specific position in the DOM. Here is an example:<\/p>\n<pre>\n<code>\n\/\/ Get the element where the new HTML will be inserted var container = document.getElementById(&quot;container&quot;); \/\/ Insert the new HTML before the existing content container.insertAdjacentHTML(&quot;beforebegin&quot;, &quot;<p>This is a new paragraph.<\/p>&quot;); \/\/ Insert the new HTML after the existing content container.insertAdjacentHTML(&quot;afterend&quot;, &quot;<p>This is another new paragraph.<\/p>&quot;); \/\/ Insert the new HTML as the first child of the container container.insertAdjacentHTML(&quot;afterbegin&quot;, &quot;<p>This is the first paragraph.<\/p>&quot;); \/\/ Insert the new HTML as the last child of the container container.insertAdjacentHTML(&quot;beforeend&quot;, &quot;<p>This is the last paragraph.<\/p>&quot;);\n<\/code>\n<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Conclusiones\"><\/span>Conclusions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The DOM is a powerful tool that allows us to interact with the elements of a web page using Javascript. In this article, we have learned different methods and properties to insert elements into the DOM. Remember that it is important to become familiar with these techniques to be able to make dynamic changes to a web page and improve the user experience.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Preguntas_frecuentes\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>1. What is the DOM?<\/strong><\/p>\n<p>The DOM is a structured representation of the content of an HTML document that allows it to be manipulated from Javascript.<\/p>\n<p><strong>2. What are the methods to insert elements into the DOM with Javascript?<\/strong><\/p>\n<p>Some of the most common methods to insert elements into the DOM with Javascript are createElement and appendChild, insertBefore, insertAdjacentHTML, among others.<\/p>\n<p><strong>3. When is it convenient to use each insertion method in the DOM?<\/strong><\/p>\n<p>The choice of insertion method into the DOM depends on the scenario and the desired result. It is important to evaluate the context and select the most appropriate method for each situation.<\/p>\n<p><strong>4. Is it possible to insert elements into the DOM at specific positions?<\/strong><\/p>\n<p>Yes, it is possible to insert elements into the DOM at specific positions using methods like insertBefore and insertAdjacentHTML.<\/p>\n<p><strong>5. What other advanced techniques are there for manipulating the DOM with Javascript?<\/strong><\/p>\n<p>In addition to inserting elements into the DOM, there are other advanced techniques such as modifying attributes, deleting elements, traversing the DOM, among others.<\/p>\n<p>If you have any further questions or would like to delve deeper into this topic, please feel free to contact me through my website <a href=\"https:\/\/nelkodev.com\/en\/\">nelkodev.com<\/a>. I&#039;ll be happy to help you. You can also visit my <a href=\"https:\/\/nelkodev.com\/en\/portfolio\/\">briefcase<\/a> to learn more about my projects.<\/p>","protected":false},"excerpt":{"rendered":"<p>El DOM (Document Object Model) es una representaci\u00f3n estructurada del contenido de un documento HTML que permite manipularlo desde Javascript. Una de las tareas m\u00e1s comunes al desarrollar con Javascript es la inserci\u00f3n de elementos en el DOM, ya sea para a\u00f1adir nuevos elementos a una p\u00e1gina web o para modificar los existentes. En este [&hellip;]<\/p>","protected":false},"author":1,"featured_media":23232,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,30,2207],"tags":[38,205,90,743,837,1022,185,2208],"class_list":["post-23231","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-javascript","category-nodejs","tag-como","tag-blog","tag-con","tag-dom","tag-elementos","tag-insertar","tag-javascript","tag-nodejs"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=23231"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23231\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/23232"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=23231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=23231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=23231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}