{"id":134,"date":"2022-11-22T19:10:04","date_gmt":"2022-11-22T19:10:04","guid":{"rendered":"http:\/\/javigomez.org\/?p=134"},"modified":"2025-09-29T20:34:30","modified_gmt":"2025-09-29T20:34:30","slug":"creacion-dinamica-de-elementos-html","status":"publish","type":"post","link":"https:\/\/javigomez.org\/index.php\/2022\/11\/22\/creacion-dinamica-de-elementos-html\/","title":{"rendered":"Creaci\u00f3n din\u00e1mica de elementos HTML"},"content":{"rendered":"\n<p>En el siguiente ejemplo se crea y borra elementos de la pantalla utilizando Javascript. Con el bot\u00f3n &#8220;A\u00f1adir&#8221; se van creando dos input box y un bot\u00f3n de borrar. Si se pulsa &#8220;Borrar&#8221; se elimina esos campos, y si se pulsa &#8220;Mostrar&#8221;, se visualiza el contenido de los campos en la parte de abajo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"http:\/\/javigomez.org\/wp-content\/uploads\/2022\/11\/image-29-2-10-1.png\" alt=\"\" class=\"wp-image-135\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>A2&lt;\/title>\n&lt;\/head>\n\n&lt;body>\n    &lt;button onclick=\"anadir()\">A\u00f1adir&lt;\/button>\n    &lt;button onclick=\"mostrar()\">Mostrar&lt;\/button> &lt;br>&lt;br>\n    &lt;div id='marco'>&lt;\/div>\n    &lt;div id='mostrar'>&lt;\/div>\n\n    &lt;script>\n        var ele = 0;\n        function anadir() {\n            var nodo = document.createElement(\"span\");\n            nodo.innerHTML = \"&lt;input type='text' id='nombre\" + ele + \"' >    &lt;input type='text' id='valor\" + ele + \"' >    &lt;button onclick='borrar(\" + ele + \")'>Borrar&lt;\/button>&lt;br>&lt;br>\";\n            document.getElementById('marco').appendChild(nodo);\n            ele++;\n        }\n\n        function borrar(ind) {\n            var coleccion = document.getElementsByTagName(\"span\");\n            var fin = coleccion.length;\n            for (i = 0; i &lt; fin; i++) {\n                var campos = coleccion&#91;i].children;\n                if (campos&#91;0].id==\"nombre\"+ind){\n                    coleccion&#91;i].remove();\n                    i=fin;\n                }\n            }\n\n        }\n\n        function mostrar() {\n            var coleccion = document.getElementsByTagName(\"span\");\n            var fin = coleccion.length;\n            for (i = 0; i &lt; fin; i++) {\n                var campos = coleccion&#91;i].children;\n                document.getElementById(\"mostrar\").innerHTML += campos&#91;0].value + \" - \" + campos&#91;1].value + \"&lt;br>\";\n            }\n        }\n\n    &lt;\/script>\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>En el siguiente ejemplo se crea y borra elementos de la pantalla utilizando Javascript. Con el bot\u00f3n &#8220;A\u00f1adir&#8221; se van creando dos input box y &hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[37,102,103,173],"class_list":["post-134","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-appendchild","tag-crear-elementos","tag-createelement","tag-getelementsbytagname"],"_links":{"self":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/comments?post=134"}],"version-history":[{"count":1,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/134\/revisions"}],"predecessor-version":[{"id":980,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/134\/revisions\/980"}],"wp:attachment":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media?parent=134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/categories?post=134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/tags?post=134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}