Question

I have a page which loads and then I do some JQuery upon it. When doing the line:

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

I was trying to figure out why it was erroring out and saying there was a Hierarchy error. Maybe there is improper DOM in r? To save on the output as it is long, I will show the server side. r below does not error, but it is when appending it with the div above where the issues actually occur.

var r = $(result);

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

What am I doing wrong where it thinks the above is improperly formed 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>";

This is a workaround but works…

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