как заменить тэг p в div?

167

20 марта 2019, 02:10

Надо заменить p на ans1,ans2 скриптом

Из этого

<div class="entry">
<p>Сломался</p>
<p>Нет света</p>
<p>Нет сигнала</p>
<p>Сгорел</p>
<p>Плохая погода</p>
<p>Не заплатили</p>

В это

<div class="entry">
<ans1>Сломался</ans1>
<ans2>Нет света</ans2>
<ans3>Нет сигнала</ans3>
<ans4>Сгорел</ans4>
<ans5>Плохая погода</ans5>
<ans6>Не заплатили</ans6>

Answer 1

[].forEach.call( document.querySelectorAll('div p'),function(i,j){ 
	i.outerHTML = '<ans'+(j+1)+'>'+i.innerHTML+'</ans'+(j+1)+'>'; 
});

<div> 
  <p>Lorem.</p> 
  <p>Reiciendis?</p> 
  <p>Magni!</p> 
  <p>Debitis.</p> 
  <p>Cumque.</p> 
  <p>Quibusdam.</p> 
</div>

Answer 2

function replace() { 
  var div = document.querySelector(".entry"); 
  var count = div.querySelectorAll("p").length; 
  var str = div.innerHTML; 
  for (var i = 1; i <= count; i++) { 
    str = str.replace('<p>', `<ans${i}>`); 
    str = str.replace('</p>', `</ans${i}>`); 
  } 
  div.innerHTML = str; 
   
  console.log(div.innerHTML); 
}

<button onclick="replace()">Replace</button> 
<div class="entry"> 
  <p>Сломался</p> 
  <p>Нет света</p> 
  <p>Нет сигнала</p> 
  <p>Сгорел</p> 
  <p>Плохая погода</p> 
  <p>Не заплатили</p> 
</div>