innerHTML 可以渲染script吗

2024-08-30

让 innerHTML 进来的 script 代码跑起来

今天来简单聊聊如何让 innerHTML 进来的 scrip 代码跑起来的问题. 前台请求一个接口,接口返回一些 HTML 标签拼接成的字符串,以供前端直接 innerHTML 生成 DOM 元素,这样的做法非常普遍.但是你是否遇到过,如果字符串中拼接的 HTML 标签中有 script 标签,那么该段脚本是无法执行的,这并不是 bug,而是 w3c 的文档规定的. 比如如下这段代码,innerHTML 插入的脚本(alert)并不会执行: <div id="myDiv">

执行 innerHTML 里的 <script>

原文:执行 innerHTML 里的 <script> 背景有时候我们会有把一整段 HTML 动态塞进页面的需求,例如渲染了一个模板,从服务器端获取了一段广告代码等.一般情况下我们使用 container.innerHTML 即可.但是当 HTML 中出现 script 标签时,直接使用 innerHTML 并不会执行它. 一个例子 <div id="test">Hello HTML</div> <script> document.ge

使用innerHTML生成的script节点不会发出请求与执行text属性

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="box"></div> <script> var boxEl = document.querySelector('#box') boxEl.innerH

vue之文本渲染

Vue使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据.所有Vue的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析. 在前面,我们一直使用的是{{}}的形式渲染文本,但是除此方法之外,vue还提供了其他几种常见的文本渲染方式: v-text:更新元素的innerText v-html:更新元素的innerHTML v-once:静态插值 v-pre:原格式输出 v-cloak:指令保持在元素上直到关联实例结束编译 <!DOCTYPE htm

如何优雅的把后台数据（通常是JSON）轻松渲染到html页面

如何优雅的把后台数据(通常是JSON)轻松渲染到html页面在我们做前后端分离的时候,都有遇到过一些看起卡很简答,确无从下手的问题把.比方说后台给了前端一个list集合,集合里面有很多学生,我们现在要对这些学生在前端渲染展示.我们怎么办? 当然如果你是使用了强大的框架,完全不必要在意这些问题了. 但是当我们啥都没有的时候,我们可以考虑使用handlerbars这款强大的工具.可以非常轻松,侵入化很小,快捷的实现数据到页面的渲染. 1. 模板引擎handlerbars - 官方网站:http:/

script标签中defer和async属性的区别

这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件.由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染,对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟,为了避免这个问题,建议把全部的js引用放在</body>标签之前. script标签存在两

innerHTML、innerText、outerHTML、outerText的区别

我们在用JS/JQ 获取或设置元素内容的时候,通常是获取或设置指定元素之间的内容 <script> //JS document.getElementById('test').innerHTML="设置元素内容"; //JQ $("#test").val("设置元素内容"); </script> 但是如果我们需要获取包含元素本身的内容的时候就会变得很麻烦,这时候用outerHTML便可以轻松解决问题了. 原HTML为: &l

页面动态加入<script>标签并执行代码

在页面中动态追加html片段的时候,有时候动态添加的代码会含有<script>标签,比如用了一些模板引擎,或者你的代码有些复杂的时候.然而我们用DOM提供的innerHTML方式来添加代码的时候,<script>标签中的代码并不能执行,如果有src属性,指向的外联文件也不会被加载,这并不是浏览器的bug,因为w3c文档就是这么规定的. 那我们有什么办法可以恢复追加的<script>标签的代码执行能力呢? 重新构造<script>标签

JS-003-innerText 与 innerHTML 区别

此文主要讲述在使用 innerText 和 innerHTML 获取元素中间值时的差别,我个人将二者的区别简单的理解为: webelement.innerText : 获取的是页面元素显示的文本 webelement.innerHTML : 获取的是元素中间的 HTML 源码闲话少述,就此上码.敬请小主参阅,若有不足之处,敬请大神指正,不胜感激! 对应的 HTML 页面源码如下所示: <html> <head> <meta charset='utf-8'> <t

Java Script基础（七） HTML DOM模型

一.HTML DOM. HTML DOM的特性和方法是专门针对HTML的,HTML中的每个节点都是一个对象,通过访问属性和方法的方式,让一些DOM操作更加简便,在HTML DOM中有专门用来处理白哦个及其元素的属性和方法. HTML DOM参考手册下面以Table为例来讲解HTML DOM动态操作表格. 1.Table对象(表格) 在HTML DOM中, table对象代表一个HTML表格,TableRow对象代表HTML表格的行,tableCell对象代表HTML表格的单元格.在HTML中可

用script实现内容显示，并使用json传输数据

今天做一个项目,要求是div内为空所有代码都写在<script>里面,<script>里面的文本用json传输.这个对我一个刚出校门,用div写了三年的页面的人来说真的好难,更何况我进公司之前根本就不知道什么json,我很庆幸我在这个公司里面有同事带带我,教教我,有不会的也能问问他们.真的是感觉这三年都白学了,学的知识完全不能跟社会接轨... 还好,最后在教程和同事的帮助下写出来了,下面贴上源代码. <!DOCTYPE html><html> <he

解决 innerHTML 在 IE6-IE9中不能赋值的bug

在MSDN可以了解跟多,关于innerHTML的介绍,但是在这里只要是解决表格部分问题 MSDN上有这样的记录: When using innerHTML to insert script, you must include the defer attribute in the script element. The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table,

innerText和innerHTML的区别

innerhtml用法 innertext用法以及innerHTML与innertext的区别,看完这个大家以后在实际应用中,就可以选择合适的方法.尽可能的考虑到兼容性. test.innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签. 上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”. test.innerText: 从起始位置到终止位

让innerHTML方法添加到元素里的js可以被解析执行

<!DOCTYPE html> <html> <head> </head> <body> <div id="test" style="background:skyblue">test innerHTMLJS</div> <div onclick="say();" style="background:skyblue; margin:20px;&quo

textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用场景和区别

今天要讲的这些属性都可以用来获取某个元素的内容,你可能会觉得不可思议,或是说上一句"丧心病狂"也.但当你看完以下内容后,会发现除outerText无用外,其他的都有各自的使用场景,不然它就真的是丧心病狂,然后我们就可以各回各家了. innerText 引用MDN,Node.textContent上的一段话: Internet Explorer 引入了 element.innerText,目的是相似的,不过有下面几点不同之处: textContent 会获取所有元素的内容,包括<s

js中innerHTML、outerHTML与innerText的用法与区别

________________________________________________________________________________________________________ 转载自:http://www.phpweblog.net/kiyone/archive/2007/05/17/1206.aspx js中innerHTML与innerText的用法与区别用法: <div id="test"> <span style=&qu

three.js - 渲染并展示三维对象

看结果: 看源码及解释: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>First Scene</title> <style type="text/css"> body { /*移除所有的滚动条*/ margin: 0; overflow: hidden; } </

Java Script注意事项

1.HTML中,打错标点符号或输入格式不对(多输等号或少加括号等) 会导致字体颜色不对劲 2.写Java Script时通常的做法是把函数放入 <head> 部分中,或者放在页面底部.这样就可以把它们安置到同一处位置,不会干扰页面的内容. 3.可以把脚本保存到外部文件中.外部文件通常包含被多个网页使用的代码如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件注意:外部脚本不能包含 <script> 标签.

异步加载script,提高前端性能(defer和async属性的区别)

一.异步加载script的好处为了加快首屏响应速度,前端会采用代码切割.按需加载等方式优化性能.异步加载script也是一种前端优化的手段. 就好比如果我的页面其中一个功能需要打开地图,但是地图的js插件包是非常大的,而如果用户不用地图功能的时候,我们当然不能再给它加载js地图包,白白让他多花等待时间岂不是很冤枉!于是我们可以动态插入script,当用户点击了某个按钮的时候,再新建script标签,引入地图js资源. 下面介绍下异步加载script的几种方式. 二.异步加载script的方式

java Script复习总结

一:基础知识 1.JavaScript语言的历史 l 早期名称:livescript l 开发公司:网景公司(netscape) 2.JavaScript语言的基本特点 l 基于对象 l 事件驱动 l 解释性语言 l 实时性 l 动态性 l 跨平台 l 开发使用简单 l 安全性 l 脚本语言 l 弱类型 3.JavaScript语言的组成 l ECMAScript l DOM l BOM 4.JavaScript常用的输入输出语句 l alert()

innerHTML 可以渲染script吗

热门专题