用新的html替换HTML代码块

Question

因此，我正在尝试在几个页面上用新的标题部分替换标题部分。

我使用jquery或Java Script进行此操作的原因是因为它是使用PL / SQL构建的，因此我无法仅通过调用pl / sql的模板进入该部分。 所以我想用一个全新的代码块替换以及将标头更改为

希望这是有道理的。

目前我已经尝试了以下方法

 $('header'). replaceWith("new html");

而且我也尝试过

$('header').html("my new html");

还是没用。

如果有人对我开放有任何想法，那么这不只是HTML的一行，而是整个导航菜单和徽标以及所有这些，所以也许我只是没有正确编写要通过replace方法调用的html。

任何帮助，将不胜感激。

这是一个例子

  <header class="header-account">
<nav class="navbar navbar-static-top">
    <div class="container">

        <div class="row">

            <div class="col-sm-12 col-md-3">
                <div class="navbar-header">
                    <a class="navbar-brand" href="http://aae.org/specialty" alt=""></a>
                </div>
            </div>

            <div class="col-sm-12 col-md-9">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="welcome-name">Welcome, 
                              <!--#include object="CUST_DISPLAY_NM"-->  
                        </div>
                    </div>

被替换

     <header class="fl-page-header fl-page-header-fixed fl-page-nav-right">
<div class="fl-page-header-wrap">
    <div class="fl-page-header-container container">
        <div class="fl-page-header-row row">
            <div class="fl-page-logo-wrap col-md-3 col-sm-12">
                <div class="fl-page-header-logo">
                    <a href="https://aaendo.wpengine.com/patients/"><img 
 class="fl-logo-img" itemscope itemtype="http://schema.org/ImageObject" 
 src="https://aaendo.wpengine.com/patients/wp- 
 content/uploads/sites/3/2017/08/American-Association-of-Endodontists-1.png" 
 data-retina="https://aaendo.wpengine.com/patients/wp- 
 content/uploads/sites/3/2017/08/American-Association-of- 
 Endodontists@2x.png" alt="Endodontists: Specialists in Saving Teeth" /><img 
 class="sticky-logo fl-logo-img" itemscope  
 itemtype="http://schema.org/ImageObject" 
 src="https://aaendo.wpengine.com/patients/wp- 
 content/uploads/sites/3/2017/08/American-Association-of-Endodontists-1.png" 
 alt="Endodontists: Specialists in Saving Teeth" /><meta itemprop="name" 
 content="Endodontists: Specialists in Saving Teeth" /></a>
                </div>
            </div>
            <div class="fl-page-fixed-nav-wrap col-md-9 col-sm-12">
                <div class="fl-page-nav-wrap">
                    <nav class="fl-page-nav fl-nav navbar navbar-default">
                        <div class="fl-page-nav-collapse collapse navbar-c

Answer 1

要替换示例中显示的内容，您需要使用“ .replaceWith”方法，因为在每种情况下，您都有不同的CSS类。

比您需要考虑的另一件事是标签结构，将它们分别打开-关闭。 要替换DOM中的对象，您必须提供完整的一个或多个对象，例如：

很好的使用：

    <header>
        <div>
            <!--  your header context here -->
        </div>
     </header>`

错误使用：

     <header>
        <div>
            <!--  your header context here -->

最后：使用.replaceWith方法并遵守标签结构。

Answer 2

我设法使其正常运作...请参阅下文。 我删除了要更改为的代码格式。 全部都在一行上。

<script>
    var newhtml = '<header class="fl-page-header fl-page-header-fixed fl-page-nav-right"><div class="fl-page-header-wrap"><div class="fl-page-header-container container"><div class="fl-page-header-row row"><div class="fl-page-logo-wrap col-md-3 col-sm-12"><div class="fl-page-header-logo"><a href="https://aaendo.wpengine.com/patients/"><img class="fl-logo-img" itemscope itemtype="http://schema.org/ImageObject" src="https://aaendo.wpengine.com/patients/wp-content/uploads/sites/3/2017/08/American-Association-of-Endodontists-1.png" data-retina="https://aaendo.wpengine.com/patients/wp-content/uploads/sites/3/2017/08/American-Association-of-Endodontists@2x.png" alt="Endodontists: Specialists in Saving Teeth" /><img class="sticky-logo fl-logo-img" itemscope itemtype="http://schema.org/ImageObject" src="https://aaendo.wpengine.com/patients/wp-content/uploads/sites/3/2017/08/American-Association-of-Endodontists-1.png"alt="Endodontists: Specialists in Saving Teeth" /><meta itemprop="name" content="Endodontists: Specialists in Saving Teeth" /></a></div></div><div class="fl-page-fixed-nav-wrap col-md-9 col-sm-12"><div class="fl-page-nav-wrap"><nav class="fl-page-nav fl-nav navbar navbar-default"><div class="fl-page-nav-collapse collapse navbar-c'

    $('header').replaceWith(newhtml);
</script>

哦，我确定您的源代码中都有它，但是请确保所有div都已关闭，当然也要确保您的标头元素已关闭。