jquery在加载页面之前替换html标签答案

【问题标题】：jquery replace html tag before loading pagejquery在加载页面之前替换html标签
【发布时间】：2019-12-24 08:35:07
【问题描述】：

我想在加载页面时将一个 HTML 标记替换为另一个，而不显示原始标记。例如，我有一个名为 header 的类标签。

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

我想用另一个标签替换而不显示原始标签，例如：

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

我使用这个代码：

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

但是，首先显示原始标签，然后将其删除，并显示新标签。

【问题讨论】：

您不能在加载页面之前执行此操作，因为这不是客户端 JS 的工作方式。你也不能有不匹配的开始/结束标签
您可以使用 CSS 隐藏 h2 元素，使其不显示。然后使用 JS 进行操作并更改 CSS 以显示元素。
为什么您的代码使用new-header 和newheader 似乎可以互换？此外，如果您的目标是立即替换它而不显示它，为什么还要显示“原始”元素？
谢谢。如果可能，请分享一个例子。我的主要问题是，我想隐藏原始标签然后显示新标签，而不显示原始标签，即使是片刻。
这个问题的主要目标是用我的菜单替换 nopcommerce 顶部菜单。

标签： jquery replacewith

【解决方案1】：

使用orgHeader.replaceWith($("#new-header").html());，您将用#new-header 的HTML 内容替换原始元素。
但是您要做的是将其替换为 #new-header 本身，因此您应该改用 $().outerHTML()
像这样

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

如前所述，您不能在页面加载之前执行 JavaScript/jQuery。您能做的最好的事情就是减少加载时间，使其比用户感知的更快。

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

【讨论】：