javascript - Creating a new DOM element from an HTML string using built-in DOM methods or prototype -

javascript - Creating a new DOM element from an HTML string using built-in DOM methods or prototype -

i'm trying create element dynamically using html string. here's simple illustration using both prototype , dom:

// html string var s = '<li>text</li>'; // dom var el1 = document.createelement(s); // prototype var el2 = new element(s); $('mylist').appendchild(el1); $('mylist').appendchild(el2);

both approaches insert empty listitem list.

i know using prototype's element constructor requires tagname , optional attributes parameter, figured may allow me pass in html string too.

however, msdn states "you can specify attributes within createelement method using html string method argument."... i'm not sure problem is.

and yes, know in jquery, unfortunately we're not using jquery. overlooking simple here?

should obvious, link msdn article regarding ie feature.

generally next cross-browser trick libraries dom elements html string (with work ie <td>s, <tr>s, <thead>s, <select>s , more):

var s = '<li>text</li>'; // html string var div = document.createelement('div'); div.innerhtml = s; var elements = div.childnodes;

or var element = div.firstchild if know you're getting single root node.

i recommend stick library-approved method of creating elements html strings though. prototype has feature built-into update() method.

javascript dom prototypejs