我想使用 JavaScript 用 H2 标签替换 H3 标签

Question

I want to Replace H3 Tag by H2 Tag Using JavaScript.

Kindly help me!!

Thanks in advance,

<h3 id="replace_h3_tag_by_h2_tag">This is H3 Heading</h3>

<button type="button" onclick="changeHTMLTag()">I want to Replace H3 Tag by H2 Tag Using JavaScript</button>

<script>
    function changeHTMLTag()
    {
        //Help Me
    }
</script>

Answer 1

Simply change the outerHTML of the H3 tag like this:

  function changeHTMLTag() { var el = document.querySelector('#replace_h3_tag_by_h2_tag'); el.outerHTML = '<h2>' + el.innerHTML + '</h2>'; } 

 <h3 id="replace_h3_tag_by_h2_tag">This is H3 Heading</h3> <button type="button" onclick="changeHTMLTag()">I want to Replace H3 Tag by H2 Tag Using JavaScript</button> 

PS: Use a class or data-change-this instead of id to change more than one

<h3 data-change-this>Change me!</h3>
<h3 class="change-this">Change me!</h3>

and then use

document.querySelectorAll('[change-this]'); // for data-change-this
document.querySelectorAll('.change-this.'); // for class change-this

EDIT: snippet on how this works

  function changeHTMLTag() { var els = document.querySelectorAll('[data-replace-h3]'); for (var i = 0; i < els.length ; i++) { els[i].outerHTML = '<h2>' + els[i].innerHTML + '</h2>'; } } 

 <h3 data-replace-h3>This is H3 Heading</h3> <h3 data-replace-h3>This is H3 Heading</h3> <h3 data-replace-h3>This is H3 Heading</h3> <button type="button" onclick="changeHTMLTag()">I want to Replace H3 Tag by H2 Tag Using JavaScript</button> 

Answer 2

Old question, other answer, simply change the innerHTML of the H3 tag with a small regex, like this:

const el = document.querySelector('#replace_h3_tag_by_h2_tag');

function changeHTMLTag() {
    el.innerHTML.replace(/h1./g, 'h2');
}