jquery replace html tag before loading page

Question

I want to replace a HTML tag with another, when loading a page, without showing original tag. For example I have a tag with class named header.

<h2 class="header">Original Tag</h2>

and I want to replace with another tag without showing original tag, for example :

<div id="new-header" class="new-header">New Tag</div>

I use of this code:

<script>
    $(document).ready(function() {
        var orgHeader = $(".header");   
        orgHeader.replaceWith($("#new-header").html()); 
    });
</script>
<div id="newheader" class="header">
   <h3>I'm new.</h3>
</div>

But, at first show the original tag and then remove it, and show new tag.

You can't do this before loading the page as that's not how client-side JS works. You also can't have mis-matching opening/closing tags — Rory McCrossan, Dec 23 '19 at 20:29
You could use CSS to hide the h2 element so it doesn't show. Then use JS to do the manipulation and change the CSS to show the element. — j08691, Dec 23 '19 at 20:33
Why does your code use `new-header` and `newheader` in a way that appears to be interchangeable? Furthermore, why are you showing the "original" element at all if your goal is to immediately replace it without ever having shown it? — Marc, Dec 23 '19 at 20:37
Thanks. Please share an example, if possible. My main problem is that, I want to hide original tag and then show new tag, without showing original tag ,Even for a moment. — Hamid N.CH, Dec 23 '19 at 20:40
The main goal of this question is for replaceing nopcommerce Top menu with my menu. — Hamid N.CH, Dec 23 '19 at 20:41
@HamidN.CH the HTML must load before the JavaScript can be executed. So there is no way to remove/hide an element until after the page has loaded. You can try with native JS yet you might encounter missing elements if the JS loads before the target element. — Twisty, Dec 24 '19 at 00:28

score 0 · Answer 1 · answered Dec 23 '19 at 20:44

With orgHeader.replaceWith($("#new-header").html()); you're replacing the original element with the HTML content of #new-header.
But what you want to do is to replace it with #new-header itself so you should use $().outerHTML() instead
Like this

orgHeader.replaceWith($("#new-header").outerHTML());

score 0 · Answer 2 · answered Dec 23 '19 at 20:56

 $(document).ready(function() {
var h2 = document.getElementsByClassName('header')[0]
var div =  document.createElement('div')
div.classList.add('new-header');
div.innerHTML = 'New Tag';
h2.parentNode.insertBefore(div , h2);
h2.parentNode.removeChild(h2);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 class="header">Original Tag</h2>

score 0 · Answer 3 · answered Dec 24 '19 at 00:35

As mentioned, you cannot execute JavaScript/jQuery before the page loads. The best you can do is reduce load time so that it is faster than the User can perceive.

$(function() {
  var origHeader = $(".header");
  var newHeader = $("<h2>", {
    class: "new-header"
  }).html("New Header");
  origHeader.replaceWith(newHeader);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 class="header">Original Tag</h2>

jquery replace html tag before loading page

3 Answers3