javascript - 无法将 div 插入另一个内部 div

Question

我需要你的帮助来解决我遇到的问题。我有这个代码：

<div id="div1" >
    <div id="edit1">
       hello
       <input type="button" id="b1" onclick="aaa()"/>
    </div>
</div>

我想在我生成的另一个新 div 中使用插入到内部 div (id=edit1) 中。

我尝试了类似的代码，但它没有运行：

js:
function aaa()
{
   var elem = createDivLine();
   var el1 = document.getElementById("div1");
   var el2 = el1.getElementById("edit1");
   el2.appendChild(elem);
}

function createDivLine()
{
   var tempDiv1 = document.createElement("div");
   tempDiv1.innerHTML = "Sam";
   return tempDiv1;
}

结果应如下所示：

<div id="div1" >
    <div id="edit1">
       hello
       <input type="button" id="b1" onclick="createDivTable()"/>
       <div>"Sam"</div>
    </div>
</div>

JSFiddle：http: //jsfiddle.net/KknXF/

Answer 1

由于 ID 是唯一的，因此尝试通过 ID 获取元素的子项是无效的。

删除这一行：

var el1 = document.getElementById('div1');

并将以下行更改为：

var el2 = document.getElementById('edit1');

如果您有一些无法修复的（我永远无法拼写那个词...）损坏的 HTML 并且您无法更改，请尝试以下操作：

var el2 = document.querySelector("#div1 #edit1");

Answer 2

它应该是

function aaa() {
   var elem = createDivLine();
   var el2 = document.getElementById("edit1");
   el2.appendChild(elem);
}

演示：小提琴