在父元素中附加子元素？

Posted 2023-03-11

【中文标题】在父元素中附加子元素？

【英文标题】：Append child element in parent?

【发布时间】：2021-11-27 11:42:01

【问题描述】：

html 元素取自容器。如果父节点有子节点，则创建一个按钮并在按钮中插入 child.id from child。一切都在代码中工作，但不想要 appendChild (h2);

应该是这样的：

<button id = "parent2"> <h2> child1 </h2> <h2> child2 </h2> </button>

<div id="container">
    <div id="parent1"></div>
    <div id="parent2">
        <div id="child1"></div>
        <div id="child2"></div>
        <div id="child3"></div>
    </div>
</div>
<p id="demo"></p> 

var parent = document.getElementById("container").querySelectorAll("*");

for (let i = 0; i < parent.length; i++) 
    if(parent[i].hasChildNodes())
         var btn = document.createElement("BUTTON");  
         btn.id = parent[i].id;                  
         document.getElementById("demo").appendChild(btn); 
    
    
    let children = parent[i].childNodes;
    
    for (let i = 0; i < children.length; i++) 
        if(children[i])
         var h2 = document.createElement("H2");  
         h2.innerHTML = children[i].id;                  
         parent[i].appendChild(h2); 
        else
    
    

【参考方案1】：

你的代码有很多错误：

这个document.getElementById("container").querySelectorAll("*"); 确实选择了一个容器的所有子容器（也包括嵌套容器）。 您不能嵌套两个循环遍历同一变量i。 childNodes 不仅返回您想要的 3 个 div，还返回代表空格/换行符的所有节点。您需要将它们过滤掉，here few possible solutions。 您需要在按钮中插入h2 标签，但您将它们插入parent[i]

这应该可行：

var parent = document
  .querySelectorAll("#container > *");

for (let i = 0; i < parent.length; i++) 
    if(parent[i].hasChildNodes()) 
        var btn = document.createElement("BUTTON");
        btn.id = parent[i].id;
        document.getElementById("demo").appendChild(btn);

        let children = parent[i].childNodes;
        for (let j = 0; j < children.length; j++) 
            if (children[j].nodeName !== 'DIV') continue;
            var h2 = document.createElement("H2");
            h2.innerHTML = children[j].id;
            btn.appendChild(h2);
        
    

<div id="container">
  <div id="parent1"></div>
  <div id="parent2">
      <div id="child1"></div>
      <div id="child2"></div>
      <div id="child3"></div>
  </div>
</div>
<p id="demo"></p>

【讨论】：

感谢您的回答，一切正常，但如果我将 child4 和 child5 插入（child3 他成为 parent3）那么它就不起作用了。

好吧，你需要更好地解释你需要什么。那么按钮应该如何嵌套呢？

Nowbie，我想问你是否可以更好地解释为什么它必须是 (children [j] .nodeName! == 'DIV') 以及为什么没有它它就不能工作？跨度>