javascript - 不正确的 DOM 问题

Question

我有一个加载的页面，然后我在它上面做了一些 JQuery。做线时:

var div = $("<div class='modal'>").append(r);

我试图找出为什么会出错并说存在层次结构错误。也许 r 中的 DOM 不正确？为了节省输出，因为它很长，我将显示服务器端。下面的 r 不会出错，但是当将其附加到上面的 div 时，实际会出现问题。

var r = $(result);

结果:

"<div>
   <input type='text' id ='queryInput' />
   <button id = 'queryButton' runat='server' value = 'Re-Filter'>Re-Filter</button>
</div>
<div id='set'>
   <select>
     <!-- The options are populated by a loop in ASP.net -->
     <option value = '" + Convert.ToString(record.fe_id) + "'>" + Convert.ToString(record.fe_name) + "</option>  
   </select>
</div>
<div>
   <button id = 'buttonReturnValue' value = 'Return Selected Element'>Return Selected Element</button>
</div>"

我做错了什么，它认为上面的 dom 格式不正确？

Answer 1

var text = "<div><input type='text' id ='queryInput' /><button id = 'queryButton' runat='server' value = 'Re-Filter'>Re-Filter</button></div><div id='set'><select><option value = '" + Convert.ToString(record.fe_id) + "'>" + Convert.ToString(record.fe_name) + "</option></select></div><div><button id = 'buttonReturnValue' value = 'Return Selected Element'>Return Selected Element</button></div>";

这是一种解决方法，但有效...

var d = document.createElement("div");
d.innerHTML = text;
document.getElementById('modal').appendChild(d);