鍍金池/ 問(wèn)答/HTML/ JavaScript批量替換標(biāo)簽的問(wèn)題

JavaScript批量替換標(biāo)簽的問(wèn)題

問(wèn)題描述

Hi 各位：
現(xiàn)遇到一個(gè)問(wèn)題，需要批量處理一下ID為wzleftb下的一些標(biāo)簽。希望有JS大神能幫忙看一下：

把所有a標(biāo)簽替換成li標(biāo)簽

需要處理的原h(huán)tml：

  <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標(biāo)簽替換成li標(biāo)簽）

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

各位大神，我研究很長(zhǎng)時(shí)間也沒搞定，求助了啊。

回答
編輯回答
冷溫柔
     var html="";
      $.each($("img"),function(index,value){
          html+="<li><img src="+$(this).attr("src")+"/></li>";
      })
      $("div").html(null);
      $("div").append(html);
2017年1月23日 12:49
編輯回答
乖乖瀦
var tag = '';
$('#wzleftb a').each(function(i,item){
    $(item).find('img').wrap('<li></li>');
    tag += $(item).html();
    $('#wzleftb').html(tag)
})
2018年1月12日 22:59
編輯回答
風(fēng)畔
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); // 放進(jìn)代碼塊即刻進(jìn)行解析，提升性能
}
wzleftb.innerHTML = ''; // 清空原來(lái)的內(nèi)容
wzleftb.appendchild(dom); // 填充內(nèi)容
2018年6月15日 10:00