js以字符串方式创建DOM（原生js，jquery，extjs）

原生js

 利用innerHTML属性实现

<script type="text/javascript">

var divHtml=
　 '<div>'+
'<ul>'+
'<li>'+
'<a href="#">something added</a>'+
'</li>'+
'</ul>'+
'</div>';

var div=document.createElement('div');
div.innerHTML=divHtml;
document.body.appendChild(div);

var li=div.getElementsByTagName('li')[0];
console.log(li);

</script>

jquery实现

方式一：利用$符号或者append等DOM方法将字符串直接转变为jquery对象

<script type="text/javascript">

var divHtml=
　 '<div>'+
'<ul>'+
'<li>'+
'<a href="#">something added</a>'+
'</li>'+
'</ul>'+
'</div>';

var div=$(divHtml);

var li=div.find('li');
console.log(li);

li.appendTo(document.body);

</script>

方式二：利用$.parseHTML()将字符串转换为dom对象

<script type="text/javascript">

var divHtml=
　 '<div>'+
'<ul>'+
'<li>'+
'<a href="#">something added</a>'+
'</li>'+
'</ul>'+
'</div>';

var div=$.parseHTML(divHtml)[0];

var li=div.getElementsByTagName('li')[0];
console.log(li);

document.body.appendChild(div);

</script>

extjs实现

 利用element实例的update()或createChild()方法

var divHtml=
　 '<div>'+
'<ul>'+
'<li>'+
'<a href="#">something added</a>'+
'</li>'+
'</ul>'+
'</div>';

Ext.getBody().update(divHtml);

转载于:https://www.cnblogs.com/byronvis/p/4742708.html