如何用 Javascript 替换整个 HTML 内容?

2023-11-25

我尝试使用$("html").html(this.responseText);。它替换了内容,但不替换 head 和 body 标签。

例如,如果我想替换此内容:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>...</script>
<script>...</script>
</head>
<body>

<h1>This is a Heading</h1>


<script>...</script>
</body>
</html>

然后我在检查器中检查 HTML 结构,结果如下:

<!DOCTYPE html>
<html>
<title>Page Title</title>
<script>...</script>
<script>...</script>

<h1>This is a Heading</h1>

<script>...</script>

</html>

它弄乱了我的CSS。我尝试过不使用脚本,效果很好。这个问题的解决办法是什么?

我也尝试过使用javascript方法

document.open();
document.write(this.responseText);
document.close(); 

但这让我的 JavaScript 感到困惑。我收到重新声明语法错误。

我想要实现的真实代码:

<script>
  
        var frm = $('#frm');
        var submitActors = frm.find('input[type=submit]');
        var submitActor = null;
        submitActors.click(function(event) {
                submitActor = this;  
        });
        
        frm.unbind('submit').submit(function () {
           
            var formAction = document.getElementById("frm").getAttribute('action'); // Get the form action.
            var data = "";
            var pageUrl = "";
            var test_uuid = "";
            var test_number = "";
            var qid = JSON.parse(sessionStorage.getItem('userChoice')).qid;
            
            
            
            if(submitActor.name == "cmdSave"){
                data = {
                    "cmdSave" : $("#cmdSave").val(),
                    "Answer": document.querySelector('input[name="Answer"]:checked').value,
                    "csrfmiddlewaretoken": document.querySelector('input[name=csrfmiddlewaretoken').value,
                    "qid": qid
                }
            }
            else if(submitActor.name == "cmdNext"){
                data = {
                    
                    "cmdNext": document.querySelector('#cmdNext').value,
                    "csrfmiddlewaretoken":document.querySelector('input[name=csrfmiddlewaretoken').value,
                    "qid": qid
                }
            }
            var httpRequest = new XMLHttpRequest();
            var formData = new FormData();
            
            
            
            Object.keys(data).forEach(function(key) {
                console.log(key, data[key]);
                formData.append(key, data[key]);
            });
                console.log(formData)
            httpRequest.onreadystatechange = function(){
                if ( this.readyState == 4 && this.status == 200 ) {
                var response = this.responseText;
                    console.log(this.responseText) // Display the result inside result element.

                    // 1.Option
                    {% comment %} document.open();
                    document.write(this.responseText);
                    document.close(); {% endcomment %}
                    
                    // 2.Option
                    
                    {% comment %} document.documentElement.innerHTML = this.responseText;  {% endcomment %}
                    
            
                    // 3.Option
                    $(document).ready(function(){
                        $("html").html(response);
                    });
                                                                             
                
                    test_number = document.getElementById("lblNrCrt").textContent;  
                    test_uuid = "{{test.uuid}}";
                    pageUrl = "/intro/" + test_uuid + "/" + test_number + "/";
                    window.history.pushState('', '', pageUrl);
                }
            };

            httpRequest.open("post", formAction);
            httpRequest.send(formData);

            return false;
        
        });

</script>


正如我指出的那样,这是可以做到的

document.querySelector('html').innerText = 'yolo';

但如果你需要渲染 HTML 你应该这样做

document.querySelector('html').innerHTML = '<div>yolo</div>';
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何用 Javascript 替换整个 HTML 内容? 的相关文章

  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • HTML 中部分着色的阿拉伯语单词

    我不会说阿拉伯语 但我需要我们网站上对阿拉伯语的具体支持 我需要将部分阿拉伯语单词放在 span 与单词其他部分的风格不同 当我输入两个字符时 and 它们被组合成word 但是当我使用 HTML 标记时 span span 这些字母在输出
  • 通过 CDN 使用 Dojo 时如何加载自定义 AMD 模块?

    我正在使用 google 的 CDN 并尝试使用他们的加载程序加载我自己的 AMD 模块 我知道我做错了什么 但我被困住了 有任何想法吗
  • 动态img(或视频)标签根本不加载资源,HTTP请求处于“待处理”状态

    我尝试使用以下方法在 Web 应用程序上加载资源时遇到一些问题img or videoHTML 标签 我在我的应用程序中使用 Angular 并动态设置src的参数img标签 使用ng src src 指示 没有那么多图像和资源需要加载 在
  • Firefox 书签探索未超过 Javascript 的第一级

    我已经编写了一些代码来探索我的 Firefox 书签 但我只获得了第一级书签 即我没有获得文件夹中的链接 e g 搜索引擎 雅虎网站 谷歌网站 在此示例中 我只能访问 Search engines 和 google com 不能访问 yah
  • Electron - 为什么在关闭事件时将 BrowserWindow 实例设置为 null

    The 电子文档 https electronjs org docs api browser window 提供以下代码示例来创建新窗口 const BrowserWindow require electron let win new Br
  • Angular 2+ 安全性;保护服务器上的延迟加载模块

    我有一个 Angular 2 应用程序 用户可以在其中输入个人数据 该数据在应用程序的另一部分进行分析 该部分仅适用于具有特定权限的人员 问题是我们不想让未经授权的人知道how我们正在分析这些数据 因此 如果他们能够在应用程序中查看模板 那
  • Javascript 数组到 VBScript

    我有一个使用 Javascript 构建的对象数组 我需要使用 VBScript 读取它 如下例所示 我找不到在 VbScript 代码中循环遍历数组的方法myArray object 这个例子是我的问题的简化 我无法更改页面的默认语言 这
  • 使用 JQuery 更改元素的顺序

    有人知道我做错了什么吗 我正在尝试更改某些图像的显示顺序 我希望每次按下按钮时图像都会向右 向左移动一个位置 这是我尝试过的 但没有运气 任何帮助或见解将不胜感激 rightShift click function img hide var
  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div
  • 如何获取给定 DOM 元素的所有定义的 CSS 选择器?

    如何使用 jQuery 获取给定 DOM 元素的所有定义的 CSS 选择器 定义后 我的意思是在应用于任何样式表的所有 CSS 选择器document 在某种程度上 这类似于 FireBug 实现的功能 其中显示所选 DOM 元素的所有应用
  • 在 vue.js 中访问数组对象属性

    给定以下数组vue js packageMaps Object packageMap 0 Object Id 16 PackageType flag list ProductCode F BannerBase packageMap 1 Ob
  • Javascript转换时区问题

    我在转换当前时区的日期时间时遇到问题 我从服务器收到此日期字符串 格式为 2015 10 09T08 00 00 这是中部时间 但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时 它返回给我的信息如下 这是不
  • 条件在反应本机生产中失败,但在开发中有效

    我创建了一个反应本机应用程序 我需要通过它进行比较 如果属实 就会执行死刑 问题是 该条件适用于 React Native 开发模式 而不适用于 React Native 生产版本 我使用 firebase 作为数据库 也使用 redux
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
  • 为什么元素上的负底部边距会降低该元素父元素的高度?

    这可能是由于边距折叠造成的 我知道边距折叠 至少知道它如何影响相邻元素 但我不明白当涉及负边距时它如何在嵌套元素上工作 例如 在此标记和随附的 CSS 中 Markup div class parent div class child Ch
  • 将 MQTTNet 服务器与 MQTT.js 客户端结合使用

    我已经启动了一个 MQTT 服务器 就像this https github com chkr1011 MQTTnet tree master例子 该代码托管在 ASP Net Core 2 0 应用程序中 但我尝试过控制台应用程序 但没有成
  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比
  • Javascript/Jquery:确定用户是否使用鼠标滚轮、滚动条或键盘滚动

    我正在尝试让用户界面正常工作 如果他们使用鼠标滚轮 我需要让它以一种方式滚动 如果他们使用滚动条 我需要让它以另一种方式滚动 如果他们使用键盘 我需要让它以另一种方式滚动 我相信滚轮和滚动条都充当鼠标事件 但是当单击滚动条时我无法让 jav
  • CSS 是否有不等于选择器?

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如

随机推荐

  • 在浏览器中使用 javascript 按类设置 html 输入元素的值?

    我需要根据类 class Qty 设置一堆输入框的值 如果我使用 ElementID 这会起作用 document getElementById G Qty 0 value 101 但这不起作用 document getElementsBy
  • 如何覆盖屏幕阅读器对句子中单词的发音而不使其在句子中暂停?

    假设我有以下 HTML 句子 p Please enter your licence number p 屏幕阅读器将 licence 一词误读为 liss ens 语音拼写 它应该发音为 lice ens 语音拼写 我想通过向屏幕阅读器提供
  • 捕获的 Throwable 或异常为 null

    类似的问题在这里被问了两次 但从未得到任何答案 或者回答是 不可能 抱歉 可能太多了 try the line that causes the error LinearLayout cell LinearLayout inflater in
  • Matplotlib 在循环中绘图时内存不足

    我有一个相当简单的绘图例程 如下所示 from future import division import datetime import matplotlib matplotlib use Agg from matplotlib pypl
  • 哪些项目文件不应签入 SVN

    目前 我签入了所有文件 包括 dll VS 解决方案文件 图像等 我经常需要将这些文件签出到临时服务器或其他开发人员 因此拥有这些文件意味着项目已准备就绪 这里的最佳实践是什么 编辑 如果我不添加生成的文件 例如 dll 文件 如何确保它们
  • PHP SOAP 调用中多个同名元素

    我知道这类问题已经被问过很多次了 我花了几个小时阅读并尝试提供的解决方案 但似乎没有一个适合我的情况 我需要向 API 发送 SOAP 请求 该请求可以包含重复的元素 如下所示
  • 我如何(有办法)将 HRESULT 转换为系统特定的错误消息?

    根据this 没有办法将 HRESULT 错误代码转换为 Win32 错误代码 因此 至少据我理解 我使用 FormatMessage 来生成错误消息 即 std wstring Exception GetWideMessage const
  • 我可以设置viewpager的项目宽度吗?

    我希望我可以在viewpager的页面中显示3个项目 但是现在我只能设置viewpager的padding值和margin值 所以它在viewpager的页面中只显示一个项目 如何设置项目宽度 我认为如果我可以设置更小的项目宽度 viewp
  • 我什么时候应该选择IsolatedStorage 和AppData 文件存储?

    我最近发现了IsolatedStorage net 中的设施 我想知道什么时候应该将它们用于我的应用程序数据 什么时候应该使用 例如 Application LocalUserAppDataPath 我注意到的一件事是Application
  • 使用 Magick++ 获取像素颜色?

    我已经问过这个问题了 但那是关于FreeImage 现在我正在尝试做同样的事情ImageMagick 更正确地说 与Magick 我所需要的只是获取图像中像素的 RGB 值 并能够将其打印到屏幕上 我在ImageMagick论坛 不过好像没
  • 从动态库调用函数

    当我们在编译时不知道函数的名称时 如果可能的话 加载动态库并调用其函数之一的最佳方法是什么 例如 有没有一种方法可以让程序从文件中读取字符串 然后加载DLL并搜索并调用名称为从文件中读取的字符串的函数 非常感谢您的帮助 有一个example
  • 求函数在给定范围内的根

    我有一组函数f t有几个根 实际上是两个 我想找到 第一个 根并用fsolve大部分时间都工作正常 问题是 当 t 趋向无穷大时 两个根会收敛 我的功能的一个简单例子是f t x x 2 1 t 所以越大t得到的 错误越多fsolve使 有
  • iOS 7 导航栏文本和箭头颜色

    我想将导航栏设置为背景black以及里面的所有颜色white 所以 我使用了这段代码 UINavigationBar appearance setTitleTextAttributes NSDictionary dictionaryWith
  • Numpy:具有可变列数的 loadtxt()

    我有一个制表符分隔值的文件 其中文件的前半部分有 3 列和 N 行 后半部分有 2 列和 M 行 我需要将这样的文件转换为两个单独的数组 一个 3xN 和一个 2xM Example 6 7900209022264466 3 8259897
  • 如何从一条管道中排放另一条管道中的水?

    我需要以编程方式从另一个管道中排出管道 这DataflowPipelineJob类没有drain方法实施 可以打电话吗drain使用 Java API 的管道 能够使用以下代码启动排水 spawn child pipe DataflowPi
  • 终端中带有块字符的文本进度条[关闭]

    Closed 这个问题需要多问focused 目前不接受答案 我编写了一个简单的控制台应用程序 用于使用 ftplib 从 FTP 服务器上传和下载文件 我希望该应用程序向用户显示其下载 上传进度的一些可视化 每次下载数据块时 我希望它提供
  • IIS 7.5 中的 ASP.NET MVC3

    你好 我想在 Windows Server 2008 R2 SP1 中发布 MVC 3 站点 我安装了 MVC 3 和 MVC 2 当我创建 MVC 2 站点时 它工作正常 但 MVC 3 站点无法工作 我首先安装了 MVC 3 当该站点无
  • ASP Net Core Linux ERR_CONNECTION_REFUSED

    我正在测试将网络核心应用程序部署到运行 Ubuntu 18 04 和 Nginx 1 14 的 Digitalocean Droplet 为了进行测试 我使用 dotnet new 中提供的模板 The 点网新网 and dotnet新mv
  • 如何写入/传输到 V4L2loopback 模块创建的虚拟网络摄像头?

    我编写了一个应用程序 它从网络摄像头读取数据并在 Linux 上使用 OpenCV 处理帧 现在我想将应用程序的输出通过管道传输到由 V4L2loopback 模块创建的虚拟网络摄像头 以便其他应用程序能够读取它 我使用 C 编写了该应用程
  • 如何用 Javascript 替换整个 HTML 内容?

    我尝试使用 html html this responseText 它替换了内容 但不替换 head 和 body 标签 例如 如果我想替换此内容 h1 This is a Heading h1 然后我在检查器中检查 HTML 结构 结果如