首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么.html工作而不是innerHTML或appendChild

当前使用人数较多,API 超出限额,请稍后再试。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

别再说虚拟 DOM 快了,要被打脸的

你可能会想,这东西很神奇,应该会比 jQuery 快,但是实际上不是这个样子的。 虽然我同意虚拟 DOM 为我们提供了很多便利,但我将解释为什么我认为根据定义,更快的渲染和更快的更新是不正确的。...要付出代价,其利益并不是大多数人想象至少希望的。 要阅读本文,您需要熟悉DOM。理想情况下,您至少可以使用 DOM API。...当我们运行上面的代码时,原始元素被替换不是更新,例如,如果用户有焦点的字段,他们将失去焦点。 ②使用 DOM 对象 创建和更新 DOM 树的另一种方法是使用 DOM 对象。...frag.appendChild(div); }); // DOM部分 userList.innerHTML =“”; userList.appendChild(FRAG); 这看起来不太好,但它仍然是创建...虚拟 DOM 带来了很多好东西,尽管疯狂的性能水平不是其中之一。您可以将其视为 Python PHP 中的编码与 C 中的编码之间的差异。我们以性能为代价获得更多的开发人员工具。

1.9K30
  • 《JavaScript 模式》读书笔记(8)— DOM和浏览器模式1

    JavaScript层(行为)应该是不引人注意的,也就是说,JavaScript层应该不会给用户造成不便,例如在不支持JavaScript的浏览器中不会造成网页不可用等问题,JavaScript应该是用来加强网页功能,不能成为网页正常工作的必须组件...该技术建议不要使用用户代理来嗅探代码路径,而应该在运行环境中检查是否有所需的属性方法。通常将使用代理嗅探这种方法看作一种反模式。...这也是为什么使用一个好的JavaScript类库(该类库可以抽象出不同浏览器的区别)可以显著加快开发进度。   让我们来看看在访问和修改DOM树时推荐的一些模式(主要是出于性能方面考虑)。...当将文档碎片添加到DOM树时,不是将碎片本身添加到DOM树中,而是将文档碎片的内容添加进DOM树中。该操作是十分方便的。...事件对象被传递给回调事件处理器,不是使用o’clock属性(可以通过全局属性windows.event来获取访问权)。 第二部分是处理升级标签的实际工作。 接下来第三部分是取消事件的传播。

    91330

    《JavaScript 模式》读书笔记(8)— DOM和浏览器模式1

    JavaScript层(行为)应该是不引人注意的,也就是说,JavaScript层应该不会给用户造成不便,例如在不支持JavaScript的浏览器中不会造成网页不可用等问题,JavaScript应该是用来加强网页功能,不能成为网页正常工作的必须组件...该技术建议不要使用用户代理来嗅探代码路径,而应该在运行环境中检查是否有所需的属性方法。通常将使用代理嗅探这种方法看作一种反模式。...这也是为什么使用一个好的JavaScript类库(该类库可以抽象出不同浏览器的区别)可以显著加快开发进度。   让我们来看看在访问和修改DOM树时推荐的一些模式(主要是出于性能方面考虑)。...当将文档碎片添加到DOM树时,不是将碎片本身添加到DOM树中,而是将文档碎片的内容添加进DOM树中。该操作是十分方便的。...事件对象被传递给回调事件处理器,不是使用o'clock属性(可以通过全局属性windows.event来获取访问权)。 第二部分是处理升级标签的实际工作。 接下来第三部分是取消事件的传播。

    85720

    DOM「建议收藏」

    元素节点,nodeType为1 属性节点,nodeType为2 文本节点,nodeType为3 文档节点,nodeType为9 Note:文档节点并不是根元素(html),因为注释等内容可以出现在根元素之外...所以在构造DOM树时,根元素并不适合作为根节点,所以就出现了文档节点,根节点作为文档节点的子节点。...);//使用nodeValue进行访问 5、value 尽管innerHTML只对元素节点有用,但不是所有的元素节点都能使用innerHTML,比如像...e、一个综合demo 通过InnerHTML更改元素内容,通过appendChild新增元素,通过removeChild移除元素。...事件处理的工作机制: 在元素添加了事件处理函数后,一旦预定事件发生,相应的JavaScript代码可以返回一个结果,而这个结果将被传递回那个事件处理函数。

    96420

    消灭 DOM 型 XSS 的终极杀招!

    Trusted Types 要求第三方浏览器扩展程序在为 DOM API 赋值时使用类型化对象不是字符串。...Trusted Types 的工作原理 基于 DOM 的跨站脚本攻击(DOM XSS)一般发生在用户可控的源(如用户名从 URL 片段中获取的重定向 URL)数据到达一个接收点时,这个接收点是一个可以执行任意...JavaScript 代码的函数(如 eval())属性设置器(如 .innerHTML)。...听起来可能有点抽象,我们来举几个具体的例子,下面几种场景会被 Trusted Types 认为是安全的: 1.使用结构化的对象动态创建 DOM ,不是使用 innerHTML: element.textContent...report-uri //my-csp-endpoint.example 通过配置 report-uri 或者 Reporting API ,我们可以先在浏览器检测到违规行为时上报到我们提供的一个服务器,不是直接进行拦截

    20810

    JavaScript之向文档中添加元素和内容的方法

    简单的说下:这个方法无法向特定的标签下添加内容,还有就是与MIME类型application/xhtml+xml  不兼容,虽然能实现向文档下添加内容和元素的功能,但是不是很推荐使用...; 2.innerHtml属性 这个属性几乎所有的浏览器都支持,但是这个属性并不是W3C DOM的标准的组成部分,最重要的是这个属性Html5都支持。...;                 nnerHtml毫无细节可言,如果你想要获得ID=testdiv下的细节只能通过dom的属性和方法; innHtml就像一把大锤一样粗放,标准化的DOM就像手术刀一样精细...大锤也会有大锤的用处,当你需要把一大段html加入到文档里时,显然用innerHtml更合适.innerHtml不仅支持读取,还支持写入; <html xmlns="http://www.w3.org/...() 创建完我们需要创建的标签之后,就需要将创建好的标签添加到需要添加的地方,appendChild()方法就是干这个的。

    2.8K70

    关于DOM的理解

    元素节点,nodeType为1 属性节点,nodeType为2 文本节点,nodeType为3 文档节点,nodeType为9 Note:文档节点并不是根元素(html),因为注释等内容可以出现在根元素之外...所以在构造DOM树时,根元素并不适合作为根节点,所以就出现了文档节点,根节点作为文档节点的子节点。 补充内容: 值——元素类型 1——元素节点,表示文档中元素,元素节点是唯一能够拥有属性的节点类型。...4、innerHTML innerHTML只对元素节点有用,获取元素节点内容,也就是元素节点包含的文本节点的值。其他节点使用nodeValue。...4、事件操作 DOM对HTML事件做响应。...事件处理的工作机制: 在元素添加了事件处理函数后,一旦预定事件发生,相应的JavaScript代码可以返回一个结果,而这个结果将被传递回那个事件处理函数。

    94630

    JavaScript DOM基础2

    document.documentElement;//HTMLHtmlElement 在很多情况下,我们并不需要得到标签的元素节点,需要得到更常用的标签,之前我们采用的是:document.getElementsByTagName...4.Text类型 Text类型用于表现文本节点类型,文本不包含HTML包含转义后的HTML。文本节点的nodeType为3。 在同时创建两个同一级别的文本节点的时候,会产生分离的两个节点。...; box.appendChild(text); box.appendChild(text2); document.body.appendChild(box); alert(box.childNodes.length...innerHTML属性 document.getElementById('box').innerHTML;//获取文本(不过滤HTML) document.getElementById('box').innerHTML... = '123';//可解析HTML 虽然innerHTML可以插入HTML,但本身还是有一定的限制,也就是所谓的作用域元素,离开这个作用域就无效了。

    82480

    3-DOM

    注意 虽然所有的对象均能继承用于处理父节点和子节点的属性和方法,但是并不是所有的对象都拥有父节点子节点。例如,文本节点不能拥有子节点,所以向类似的节点添加子节点就会导致 DOM 错误。...> HTML DOM 主要功能 标签体的设置和获取:innerHTML 使用html元素对象的属性 控制样式 innerHTML innerHTML 属性设置返回表格行的开始和结束标签之间的 HTML...使用innerHTML简化之前的动态表格实例 <!...//实际上这四行完全可以放到一行代码(只调用一次innerHTML) tr_stu.innerHTML+=""+name+""; tr_stu.innerHTML...加载事件 onload 一张页面一幅图像完成加载。 鼠标事件 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。

    1.3K20

    JavaScript 框架工作原理你还了解多少?

    我的日常工作是开发 JavaScript 框架 (LWC)。虽然我已经在这个框架上工作了近三年,但我仍然觉得自己是个门外汉。...响应式(Reactivity) 人们常说 “React 不是响应式的”。这句话的意思是,React 采用的是 pull-based 的模式,不是 push-based 的模式。...另一种方法是将一个大的 HTML 字符串插入 innerHTML,然后让浏览器帮你解析: const container = document.createElement('div') container.innerHTML...注意:使用 innerHTML 也会涉及安全问题,但在本文中,我们假设 HTML 内容是可信的。...我们需要实现 createEffect,以便仅当 a 和 b 发生变化时(不是当别的东西发生变化时!)才会计算总和。

    19710

    Web Components 初探

    原文 任何UI框架库最期望目标之一是帮助我们建立通用的模式约定。这些约定使UI代码易于共享并为其提供理论基础。很长一段时间,每个框架库都有自己的实现UI组件版本。...我们通过Shadow DOM API不是之前的innerHTML示例添加我们新创建的template。通过Shadow DOM API将模板添加到我们的组件,我们在构造函数中添加如下代码。...Shadow DOM会保护我们的HTML不被全局CSS外部JavaScript污染。...Attributes 有时,通过特性不是属性将信息传递给组件也很方便。例如,我们可能想要传递一个初始值给我们的计数器。...if (attrName === 'value') {        this.value = parseInt(newValue, 10);    }} 对于Web通信最佳实践,最好使用自定义属性不是自定义特性

    2.7K40

    第三节 json数据绑定以及dom回流重绘、映射

    我们就添加到页面中,引发一次dom的回流,最终导致回流次数过多,影响性能 第二种:字符串拼接方式:首先循环需要绑定的数据,然后把需要动态绑定的标签以字符串方式拼接到一起,拼接完成后,最后统一添加到页面中,工作中最常用的方式...+= str; 相当于oul.innerHTML = oul.innerHTML(把之前的三个li以字符串的方式获取到)+str 拼接完成的整体还是字符串,最后把字符串统一的添加到了页面中...= '' + '0' + (i + 4) + '' + ary[i].name; frg.appendChild(ali1); } oul.appendChild...(); for (var i = 0; i < arr.length; i++) { frg.appendChild(arr[i]); } oul.appendChild...(frg); frg = null; 页面上为何不是8条数据?

    1.3K20
    领券