用新的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都已關閉，當然也要確保您的標頭元素已關閉。