{"id":246,"date":"2023-01-18T19:14:43","date_gmt":"2023-01-18T19:14:43","guid":{"rendered":"http:\/\/javigomez.org\/?p=246"},"modified":"2025-09-29T20:34:10","modified_gmt":"2025-09-29T20:34:10","slug":"crear-una-lista-li-con-javascript","status":"publish","type":"post","link":"https:\/\/javigomez.org\/index.php\/2023\/01\/18\/crear-una-lista-li-con-javascript\/","title":{"rendered":"Crear una lista (li) con JavaScript"},"content":{"rendered":"\n<p>El siguiente c\u00f3digo realiza la creaci\u00f3n de elementos &lt;li> sobre una lista ordenada &lt;ol> de forma din\u00e1mica con JavaScript.<\/p>\n\n\n\n<p>Tambi\u00e9n permite el borrado de un elemento de la lista.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html>\n\n&lt;head>\n    &lt;meta http-equiv=\"content-type\" content=\"text\/html;charset=utf-8\">\n    &lt;title> crearLista&lt;\/title>\n    &lt;script type=\"text\/javascript\">\n        function crear() {\n            var texto = prompt(\"texto para la lista\");\n            var ol = document.createElement(\"ol\");\n            ol.id = \"lista\";\n            var li = document.createElement(\"li\");\n            var txt = document.createTextNode(texto);\n            li.appendChild(txt);\n            ol.append(li);\n            document.body.appendChild(ol);\n            document.getElementById(\"info\").innerHTML = \"Elementos: \" + ol.children.length;\n        }\n        function anadir() {\n            var texto = prompt(\"texto para la lista\");\n            var ol = document.getElementById(\"lista\");\n            var li = document.createElement(\"li\");\n            var txt = document.createTextNode(texto);\n            li.appendChild(txt);\n            ol.append(li);\n            document.getElementById(\"info\").innerHTML = \"Elementos: \" + ol.children.length;\n        }\n\n        function borrar() {\n            var id = parseInt(prompt(\"elemento a eliminar\"));\n            var ol = document.getElementById(\"lista\");\n            var liBorrar = ol.children&#91;id];\n            liBorrar.parentElement.removeChild(liBorrar);\n            document.getElementById(\"info\").innerHTML = \"Elementos: \" + ol.children.length;\n        }\n    &lt;\/script>\n&lt;\/head>\n\n&lt;body>\n    &lt;h1>Creando una lista&lt;\/h1>\n    &lt;button onclick=\"crear()\">crear la lista&lt;\/button>\n    &lt;button onclick=\"anadir()\">a\u00f1ade un elemento&lt;\/button>\n    &lt;button onclick=\"borrar()\">borrar&lt;\/button>\n    &lt;div id=\"info\">&lt;\/div>\n&lt;\/body>\n\n&lt;\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>El siguiente c\u00f3digo realiza la creaci\u00f3n de elementos &lt;li> sobre una lista ordenada &lt;ol> de forma din\u00e1mica con JavaScript. Tambi\u00e9n permite el borrado de un &hellip; <\/p>\n","protected":false},"author":1,"featured_media":248,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[103,104,205,286],"class_list":["post-246","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-createelement","tag-createtextnode","tag-javascritp","tag-removechild"],"_links":{"self":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/246","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=246"}],"version-history":[{"count":1,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/246\/revisions"}],"predecessor-version":[{"id":955,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/246\/revisions\/955"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media\/248"}],"wp:attachment":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media?parent=246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/categories?post=246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/tags?post=246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}