JavaScript批量替换标签的问题

Question

问题描述

Hi 各位：
现遇到一个问题，需要批量处理一下ID为wzleftb下的一些标签。希望有JS大神能帮忙看一下：

把所有a标签替换成li标签

需要处理的原html：

  <div class="wzleftb" id="wzleftb"> 
   <p style="text-align: center;">
       <a href="data/102129t32lrueuonnruum1.jpg" target="_blank"><img src="data/102129t32lrueuonnruum1.jpg" /></a>
       <a href="data/102129n8ir82wfvi9zd5c6.jpg" target="_blank"><img src="data/102129n8ir82wfvi9zd5c6.jpg" /></a>
       <a href="data/102129s29jk02wpt0wrew5.jpg" target="_blank"><img src="data/102129s29jk02wpt0wrew5.jpg" /></a>
   </p> 
  </div>

处理后的html：（把所有a标签替换成li标签）

  <div class="wzleftb" id="wzleftb"> 
       <li><img src="data/102129t32lrueuonnruum1.jpg" /></li>
       <li><img src="data/102129n8ir82wfvi9zd5c6.jpg" /></li>
       <li><img src="data/102129s29jk02wpt0wrew5.jpg" /></li>
  </div>

各位大神，我研究很长时间也没搞定，求助了啊。

Answer 1

var wzleftb = document.querySelector('#wzleftb'),
  imgList = wzleftb.querySelectorAll('img'),
  dom = document.createDocumentFragment(); // 利用代码块提高渲染

for (var i = 0, len = imgList.length; i < len; i++) {
  var li = document.createElement('li');
  li.appendChild(imgList[i]);
  dom.appendChild(li); // 放进代码块即刻进行解析，提升性能
}
wzleftb.innerHTML = ''; // 清空原来的内容
wzleftb.appendchild(dom); // 填充内容

Answer 2

     var html="";
      $.each($("img"),function(index,value){
          html+="<li><img src="+$(this).attr("src")+"/></li>";
      })
      $("div").html(null);
      $("div").append(html);

Answer 3

var tag = '';
$('#wzleftb a').each(function(i,item){
    $(item).find('img').wrap('<li></li>');
    tag += $(item).html();
    $('#wzleftb').html(tag)
})