用js轉append一個ul轉一個li

Question

是的，您沒看錯，我正在嘗試 append 現有 li 元素中的 ul 元素並創建子列表。 我正在使用 codepen ( https://codepen.io/Pestov/pen/AvQmxv ) 中的代碼來制作家譜樹，我想動態創建樹。 為此，我必須在先前創建的 li 中創建一個 sub ul 元素，然后有兩個 li 到該 sub ul。

----編輯---- 我的問題是：HierarchyRequestError：無法在“節點”上執行“appendChild”：新的子元素包含父元素。 js好像認為我的ul是我的parent其實是一個新的sub ul。

這是我的代碼：

<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);
  
}

我希望我清楚自己想做什么，感謝您的幫助！

Answer 1

它是如此簡單，事實上，ul 總是一樣的，所以我不得不再次定義我的變量。 這是新代碼：

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);
  
}

Answer 2

一種方法：

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     = '-----'
    }
  }