Question

所以我试图用几页上的新标题部分替换标题部分。

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

希望这是有道理的。

目前，我已经尝试了以下运气

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

我也试过

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

仍然无效。

如果有人有任何想法我现在开放这不仅仅是一行HTML，它是整个导航菜单和徽标以及所有这些所以我可能只是没有正确编写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都已关闭，当然还有你的标题元素。

用新的html替换HTML代码块

2 个答案: