如何替换HTML标签和属性

Question

I have a section of code like this

<p style="position:absolute;top:-866px;left:1550px;white-space:nowrap" class="xd">some text

<p style="position:absolute;top:-866px;left:1550px;white-space:nowrap" class="xd">some other text

and I need to replace it with

<h3>some text</h3>
<h3>some other text </h3>

Any help is appreciated.

Answer 1

a javascript solution

<script>
document.getElementsByClassName("xd")[0].outerHTML="<h3>some text</h3>"
</script>

 <p style="position:absolute;top:-866px;left:1550px;white-space:nowrap" class="xd">some text</p> <p style="position:absolute;top:-866px;left:1550px;white-space:nowrap" class="xd">some text</p> <script> var all_p = document.getElementsByClassName("xd"); while (all_p.length != 0) { all_p[0].outerHTML = "<h3>some text</h3>"; } </script> 

Answer 2

The jquery solution: JSFiddle Demo

$('p[class="xd"]').each(function(index,item){
    $(item).replaceWith("<h3>"+$(item).html()+"</h3>");  // keep the text, swap the tags
});

---

Thanks to Vishal Taj PM for showing a shorter solution: JSFiddle Demo

(for this case, there is no difference between text() and html() )

$('p.xd').each(function(){
  $(this).replaceWith("<h3>"+$(this).text()+"</h3>")  
});

Answer 3

If you are looking for a solution with Jquery you can use replaceWith(). it will replace existing tag with new one.

please find the code snippet below.

 $('p.xd').each(function(){ $(this).replaceWith("<h3>"+$(this).text()+"</h3>") }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p style="position:absolute;top:-866px;left:1550px;white-space:nowrap" class="xd">some text</p> <p style="position:absolute;top:-866px;left:1550px;white-space:nowrap" class="xd">some other text</p>