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