innerHTML插入JavaScript代码导致不运行的问题解决方案

最新推荐文章于 2025-06-17 18:13:04 发布
最新推荐文章于 2025-06-17 18:13:04 发布
阅读量746 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 开发语言 ecmascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CodeWhizZ/article/details/133020171
js 专栏收录该内容
505 篇文章 ¥59.90 ¥99.00
订阅专栏
当使用innerHTML插入JavaScript代码时，浏览器不会执行这段代码，导致预期的脚本不运行。本文分析了该问题的原因，并提出了通过document.createElement('script')创建新脚本元素并附加到DOM中来解决的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在开发网页应用程序时，我们经常会使用JavaScript来动态地修改HTML元素的内容。其中一种常见的方式是使用innerHTML属性将HTML标记和文本插入到元素中。然而，有时候我们可能会遇到innerHTML插入的JavaScript代码不运行的问题。本文将介绍这个问题的原因，并提供解决方案。

问题描述

首先，让我们看一下这个问题的具体表现。假设我们有一个包含一个按钮的HTML页面，当用户点击按钮时，我们希望动态地在页面上显示一段文本。为了实现这个功能，我们可以使用如下的JavaScript代码：

<!DOCTYPE html>
<html>
  <
了解本专栏 订阅专栏 解锁全文
通过innerHTML动态插入的script无法执行的解决方法
blogzhoubo的博客
11-05 4313
很多时候，需要通过innerHTML动态插入javascript代码到指定的div中，或者通过ajax请求回来的内容里面包含javascript代码，然后把该代码插入指定的div中，但是插入后的script却无法执行。 原因：直接通过innerHTML动态嵌入的script，浏览器会当做普通的文本，不会当作SCRIPT节点维护到DOM里面，所以调用的时候找不到。 解决方法：...
html不自动运行js,解决innerHTML插入js不运行问题
weixin_40001245的博客
05-30 1859
最近改了一个老项目, 里面的页面请求大部分是通过ajax请求后来渲染的jsp页面, 然后再用innerHTML插入到当前页. 但是这就遇到了一个问题, jsp里引入的js库以及一些js代码就无法运行了, 所以就探索了一下innerHTML以及解析js的一些方法1. innerHTML介绍有两个功能, 一个是可以获取指定DOM的HTML元素, 另一个就是替换指定DOM的HTML元素2. innerH...
关于在innerHTML中JS不执行的问题
03-28
NULL 博文链接：https://wuzhengxuan.iteye.com/blog/1263906
调用innerHTML之后onclick失效问题的解决方法
09-04
调用innerHTML之后，onclick失效了，这也是在意料之中的，因为innerHTML是以文本形式插入的button，所以无法识别onclick事件
解决ajax返回innerHTML中javascript不能运行问题
10-30
解决ajax返回innerHTML中javascript不能运行问题
用innerHTML动态插入的script没有执行的问题
sinat_34626741的博客
07-08 5092
原因：浏览器会将通过innerHTML动态插入的当成普通文本，不会维护到DOM里面，所以会存在调用的时候找不到。 解决办法：首先嵌入后，通过DOM找到所有的script标签，然后一一创建script标签，并将script里面的内容重新赋值，将这个新的script节点追加到页面的head节点中，这样就可以调用里面的函数了。 ...
使用innerHTML插入js脚本不生效问题解决
Rex__404的博客
09-01 5534
1.起因： 在使用innerHTML向某个网页插入一个按钮button，和对应的js，发现js不生效 原始代码 var mylogin = document.createElement("button"); var myjs = document.createElement("script"); mylogin.innerHTML = '<button type="button" οnclick="tologin()">提交</button>' myjs.innerHTML
在innerHTML中执行Javascript代码
weixin_34194551的博客
07-31 641
以下是javascript的函数.var global_html_pool = [];var global_script_pool = [];var global_script_src_pool = [];var global_lock_pool = [];var innerhtml_lock = null;var document_buffer = ""; function set_inne...
解决innerHTML时JS不生效
no..no,water colset!
12-12 7334
写了一个简单的函数..作用是解决innerHTML时JS不生效..基于网上某个类修改... 兼容ie6+..Firefox..其它未测! function set_innerHTML(el, htmlCode) { var ua = navigator.userAgent.toLowerCase(); if (ua.indexOf('msie') >= 0 &
解决使用innerHTML时不能执行javascript的问题
捕风的汉子
03-12 1839
  一、使用innerHTML要注意的问题 2005-12-23 16:53 xlq 瞒天过海 ob.innerHTML="&lt;scrip"+"t&gt;&lt;/s"+"cript&gt;";       二、使用innerHTML要注意的问题 2007-02-12 17:07 qianfeng @wei 这样试试&lt;script defer="defe.
让innerHTML中的script脚本执行起来
01-08
下面介绍怎么样让跑起来。 分析问题 既然只在文档加载中才被解析，那么我就得调用[removed]()方法来重新加载一次，但是这样的话原来页面的内容也会被覆盖掉了，所以不得不用IFRAME把[removed]()装载起来。 解决问题 var jsCode = 需要执行的JS代码 var jsIframe = document.createElement(iframe); jsIframe.style.display = none;//把jsIframe隐藏起来 document.body.appendChild(jsIframe); with(window
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
10-28
1. **破损的HTML标签**：当你尝试通过innerHTML添加的HTML代码中存在破损的标签，例如未闭合的`<li>`或`<div>`标签，IE浏览器可能无法正确解析，从而导致运行时错误。 2. **不合法的嵌套**：在某些情况下，IE对特定...
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
10-24
通过上述的分析和解决方案，用户可以有效解决在IE8中使用js插件时，设置innerHTML导致的“未知运行时错误”。这些方法对提高JavaScript程序设计的兼容性和鲁棒性具有一定的帮助。同时，也是对编写跨浏览器代码的一种...
解决innerHTML包含的js代码不能被执行的问题
iteye_6254的博客
06-26 1294
   今天我写了个js弹出模态对话框，这个模态对话框能直接显示一个html或者是url的文本内容，因为加入我需要在对话框里面显示比较复杂的布局的话直接用字符串来做是很麻烦且很难修改的。各方面都比较完善了，但是今天，在我想用这个对话框加载一个页面的时候发现了新问题。 在我的要加载的页面里面有和用户的交互过程，这是用js实现的，我把这个页面加载到我的模态对话框里面，页面显示完全正确，可是在测...
html中js定义的方法无效,设置document.body.innerHTML时，javascript无效
weixin_35983438的博客
06-07 1263
重置innerHTML时，不会返回所有事件处理程序。当您创建全新的DOM元素时，它们将被清除。一个想法是在正文中有两个主div，一个是你的正常显示，另一个是你想要打印的。然后，您可以隐藏任何您不想显示的内容，如下所示：main screen content goes heregenerated print content goes here// hide main contentvar mainD...
html innerhtml 绑定事件无效,js中innerHTML的动态绑定的事件丢失
weixin_32127359的博客
06-03 3196
js事innerHTML事件丢失老前端人以前很容易遇到这种问题。渲染服务器端的数据，包装成自己的HTML，使用innerHTML或者.html()，异步的把它渲染上去。这时候会发现子元素写的一些事件不生效。image案发现场例如我们想在body中追加一个div,仔细看下面这个代码，您就会发现我在说什么了。按钮var ob = document.getElementById('btn');//doc...
innerHTML中script脚本不执行的问题
younldeace1的专栏
02-10 1896
有时候，我们会想到这样做。有一个div1，我希望向后台发送请求，然后这个请求会返回一个html页面代码，我希望把返回内容填充到div1里，但是html里所包含的script将不会执行。有一个好的办法就是不要用innerHTML，而是用jquery的load方法
vue3导入xlsx表格处理数据进行渲染
最新发布
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
06-17 185
【前端表格导入实现方案】使用XLSX插件实现Excel文件上传解析，通过Vue3的el-upload组件触发文件选择，核心步骤包括：1)读取二进制文件内容；2)用XLSX解析工作簿数据；3)转换Sheet为JSON格式；4)按业务规则处理数据（跳过首尾行，提取特定列构建对象数组）；5)将处理后的数据赋值给表单对象进行页面渲染。关键点在于通过FileReader异步读取文件，以及利用XLSX的sheet_to_json方法转换表格数据，最后根据数据结构规律进行映射处理。文末还提供了多层嵌套数据的处理示例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值