sí, lo leíste bien, estoy tratando de agregar un elemento ul en un elemento li existente y crear una sublista. Estoy usando código de codepen ( https://codepen.io/Pestov/pen/AvQmxv ) para hacer un árbol genealógico y me gustaría crearlo dinámicamente. Para esto, tengo que crear un elemento sub ul en un li creado previamente, luego tuve dos li para ese sub ul.
----EDIT---- Mi problema es: HierarchyRequestError: no se pudo ejecutar 'appendChild' en 'Node': el nuevo elemento secundario contiene el elemento principal. Js parece pensar que mi ul es mi padre, pero en realidad es una nueva sub ul.
Aquí está mi código:
<div class="tree" id="tree"></div> function launchTree(){ var div = document.getElementById("tree"); var ul = document.createElement("ul"); var li = document.createElement("li"); var a = document.createElement("a"); //create the main ul element ul.setAttribute("id", "main_ul"); div.appendChild(ul) //put my first parent li.setAttribute("id", "AC_Lila_li"); a.setAttribute("data-content", "AC Lila"); a.setAttribute("id", "AC_Lila_a"); ul.appendChild(li); li.appendChild(a); //create my sub ul to put childs !!!! here's the problem!!! ul.setAttribute("id", "AC_Lila_ul"); li.appendChild(ul) //create my first child li.setAttribute("id", "Queen_Elisa_li"); a.setAttribute("data-content", "Queen Elisa"); a.setAttribute("id", "Queen_Elisa_a"); ul.appendChild(li); li.appendChild(a); //create my second child li.setAttribute("id", "Wendy_li"); a.setAttribute("data-content", "Wendy"); a.setAttribute("id", "Wendy_a"); ul.appendChild(li); li.appendChild(a); }¡Espero tener claro lo que quería hacer y gracias por su ayuda!
Era tan simple, de hecho, ul siempre era el mismo, así que tuve que definir mis variables nuevamente. Aquí está el nuevo código:
function debut(){ var div = document.getElementById("tree"); var ul = document.createElement("ul"); var li = document.createElement("li"); var a = document.createElement("a"); ul.setAttribute("id", "main_ul"); div.appendChild(ul) li.setAttribute("id", "AC_Lila_li"); a.textContent = "AC Lila"; a.setAttribute("id", "AC_Lila_a"); ul.appendChild(li); li.appendChild(a); var ul = document.createElement("ul"); ul.setAttribute("id", "AC_Lila_ul"); li.appendChild(ul) var li = document.createElement("li"); var a = document.createElement("a"); li.setAttribute("id", "Queen_Elisa_li"); a.setAttribute("onclick","descend_click();"); a.textContent = "Queen Elisa"; a.setAttribute("id", "Queen_Elisa_a"); ul.appendChild(li); li.appendChild(a); var li = document.createElement("li"); var a = document.createElement("a"); li.setAttribute("id", "Wendy_li"); a.setAttribute("onclick","descend_click();"); a.textContent = "Wendy"; a.setAttribute("id", "Wendy_a"); ul.appendChild(li); li.appendChild(a); }Una manera de hacer eso:
const divTree = document.querySelector('#tree') , infos = [ { elmLI : { id:'AC_Lila_li' }, elmA: { id:'AC_Lila_a', 'data-content': 'AC Lila' } } , { elmLI : { id:'Queen_Elisa_li' }, elmA: { id:'Queen_Elisa_a', 'data-content': 'Queen Elisa' } } , { elmLI : { id:'Wendy_li' }, elmA: { id:'Wendy_a', 'data-content': 'Wendy' } } ]; // launchTree() function launchTree() { let nvUL = divTree.appendChild( document.createElement('ul') ) nvUL.id = 'main_ul' for (let { elmLI, elmA } of infos ) { let nvLI = nvUL.appendChild( document.createElement('li') ) , nvA = nvLI.appendChild( document.createElement('a') ) ; nvLI.id = elmLI.id nvA.id = elmA.id nvA.dataset.content = elmA['data-content'] nvA.textContent = '-----' } }