Replacing a Block of HTML code with new html

Question

SO I am trying to replace a header section with a new header section on aa couple of pages.

The reason I am doing this using jquery or Java Script is because it is build using PL/SQL and I cannot get into that part only the template that calls in the pl/sql. SO I am wanting to replace the with an entire new block of code as well as change the header to

Hopefully this is making sense.

Currently I have tried the following with now luck

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

and I have also tried

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

Still didn't work.

If anyone has any ideas I am open now this is not just a single line of HTML it's the entire nav menu and and logo and all of that so it maybe I an just not writing the html properly to be called in through the replace method.

Any help would be appreciated.

Here is an example

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

to be replaced with

     <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

to replace the content shown on your example you need use ".replaceWith" method, because you have different css classes in each case.

Another thing than you w'll have consider is the tags structure, open-close each them. To replace an object in the DOM you must give complete object/objects, for example:

Good using:

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

Bad using:

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

Finally: use .replaceWith method and respect the tags structure.

Answer 2

I managed to get it to work... see below. I removed the formatting on the code you wanted to change it to. It's all on one line.

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

oh, and I'm sure you have it in your source code, but make sure all your div's are closed, and of course your header element.