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

Question

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

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

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

我试过类似的代码，但它没有运行:

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