首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    innerHTML导致事件失效bug

    在用innnerHTML的形式添加元素之后,事件绑定失效,如下 document.body.innerHTML += 'xxx'; 其实就是: document.body.innerHTML = (document.body.innerHTML...01 示例详解 如下代码: document.body.innerHTML+=str; 执行后!...元素结构已经变了 那么之前通过 var oBtn=document.getElementById('btn'); 获取的oBtn在当前的DOM树中已经不存在了,这点我们可以通过在 document.body.innerHTML...并没有被GC掉,所以oBtn.onclick还能正常运行 但点击行为的触发是基于DOM树结构中的元素的,故浏览器中的事件也称为DOM事件 既然元素都不在DOM中了,就不会被触发,不会被传播到了 02 那么用什么替代比较好呢...-- afterend --> 据说它比innerHTML效能更高也更安全,重点是它竟然还可以选位置

    1.3K20

    JS中innerHTML、outerHTML、innerText、outerText的用法与区别

    1、功能说明: innerHTML 设置或获取位于对象起始和结束标签内的 HTML innerText 设置或获取位于对象起始和结束标签内的文本 outerHTML 设置或获取对象及其内容的HTML...不包括标签)对象的文本 2、示例 页面有如下代码: span1 span2 var innerHTML...= document.getElementById("mydiv").innerHTML; var innerText = document.getElementById("mydiv").innerText...是符合W3C标准的属性,而innerText对Firefox是不支持的,因此,尽可能地去使用innerHTML, 而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML...>/gim,'')); 查看演示:http://itmyhome.com/js_innerHTML_innerText_differences/ 作者:itmyhome 发布者:全栈程序员栈长,

    1.2K20

    【技术创作101训练营】innerHTML插入运行js字符串问题探究

    但是这就遇到了一个问题, jsp里引入的js库以及一些js代码就无法运行了, 所以就探索了一下innerHTML以及解析js的一些方法 1. innerHTML介绍 有两个功能, 一个是可以获取指定DOM...的HTML元素, 另一个就是替换指定DOM的HTML元素 2. innerHTML插入js会发生什么 什么也不会发生, 因为用 innerHTML 插入文本到网页中有可能成为网站攻击的媒介,从而产生潜在的安全风险问题...所以HTML 5 中指定不执行由 innerHTML 插入的 标签。...3.2 eval 可以用ajax获取外部js脚本, 然后通过eval去加载外部的js脚本和内联js脚本....但是eval会存在安全问题 3.3 document.createElement 创建script标签对象插入DOM, 接下来也就是用这个方法来实现一个类, 进行html字符串的解析插入 4.

    1.2K00

    JS魔法堂:被玩坏的innerHTML、innerText、textContent和value属性

    二、innerHTML                             由于innerText和textContent均为对innerHTML内容作不同的处理而成,因此我们需要先明确innerHTML...也就是说除了单独的 、&、'和" 会被转换为实体名外,将原封不动地将值赋予给innerHTML属性。 取值操作:直接获取innerHTML属性值。  ...c). value可被设置且生效,不会影响innerHTML和textContent的取值。 Chrome      a). innerHTML可被设置但无效,属性值永远保持空字符串。   ...但不影响innerHTML和textContent。innerText的取值由innerHTML的属性值经过处理后返回。...('textarea') exports.encode = function(raw){ dom.innerHTML = raw return dom.innerHTML

    4.2K70

    【Web APIs】JavaScript 操作元素 ① ( 修改元素内容 | innerText 属性修改元素文本内容 | innerHTML 属性修改元素 HTML 内容 )

    innerText 属性 修改元素内容 : 元素对象的 innerText 属性可以 获取 或 设置 元素内的 文本内容 , 使用该属性时 , 会 获取 元素的 当前文本内容 ; 设置该属性时 , 会 替换...属性修改元素 HTML 内容 通过 元素对象的 innerHTML 属性 修改元素内容 : 元素对象的 innerHTML 属性可以 获取或设置元素内部的 HTML 标签元素 , 设置这个属性时 ,...实际上是在替换元素内部的 HTML 结构 ; 使用该属性时 , 会 获取 元素的 当前文本的 HTML 内容 ; 设置该属性时 , 会 替换 元素的 当前文本的 HTML 内容 ; 注意 : 使用该属性...添加事件处理程序 button.onclick = function() { div.innerHTML = "已点击 使用 innerHTML 属性...= "已点击 使用 innerHTML 属性修改元素文本内容" 执行结果 :

    25910
    领券