innerHTML问题汇总以及和appendChild的区别

最新推荐文章于 2023-06-28 12:42:04 发布
最新推荐文章于 2023-06-28 12:42:04 发布
阅读量424 收藏 2
点赞数 2
分类专栏： 笔记 文章标签： javascript html jquery 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46050814/article/details/104468565
版权
本文总结了使用innerHTML时遇到的问题及其解决方案，包括追加元素的正确方式、事件监听失效和新追加节点的清除问题。建议在需要时使用appendChild，以避免innerHTML带来的安全和性能问题。
摘要由CSDN通过智能技术生成

这两天写到前端代码时遇到innerHTML使用的不少坑，以下是我总结的坑以及对应的解决方案(希望各位童鞋能及时看到这章并解决自己的问题，不要像我一样又掉了几十根秀发…)
问题论述将以ul和li为例介绍，方便各位理解。

<ul id="uls">  
    <li> 我是li </li> 
</ul>/*输出：我是li*/

1.追加新的li到ul内时的写法为

> document.getElementById("uls").innerHTML="<li>我是新来的</li>"；

问题:ul内容改变，输出为“我是新来的”,因为我们想实现的效果是追加到ul上，也就是显示出“我是l

最低0.47元/天 解锁文章
钢琴梦想的程序媛
关注
专栏目录
javascript中innerHTML和appendChild的比较
代码青春
03-24 947
https://zhidao.baidu.com/question/98239153.html
appendchild 啥意思 Javascript
最新发布
Jenom的博客
07-21 246
在这个例子中，`document.createElement('div')` 创建了一个新的 `<div>` 元素，`document.getElementById('parent')` 获取了ID为 `parent` 的元素，然后 `appendChild(newElement)` 将新创建的 `<div>` 元素添加到这个父元素中。通常，这个方法被用来将一个元素（如一个新创建的 `<div>` 或 `<span>` 元素）添加到HTML文档中的一个已存在的父元素中。// 将整个文档片段添加到父元素中。
innerHTML 和 appendchild 的区别
xinyi128108的博客
04-25 265
var x = document.getElementById("x"); x.appendChild(document.createTextNode("汉字")); x.innerHTML = "&amp;百度&amp;"; // 在页面显示为链向百度的 "&百度&" 超链接 x.appendChild(document.createTextNode("&
append()、appendChild() 和 innerHTML 的区别
热门推荐
QLiuQ
04-08 4万+
概念和区别：append() 可以同时传入多个节点或字符串，没有返回值；据说 append 还是试用期的方法，有兼容问题，（但我用了暂时火狐，谷歌，iE都能使用）。https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode/appendappendChild() 只能传一个节点，且不直接支持传字符串【需要 appendChild(docu...
appendChild和innerHTML的小区别
qq_40931054的博客
06-08 686
appendChild接收的类型是一个对象， innerHTML接收的是一个字符串。 一般在js里，拼接html标签时，使用字符串比如：var html+='<div></div>'，用innerHTML=html来接收值 如果是创建了一个div标签对象，var div= createElement('div')，用appendChild(div)把标签放进去。 如果用innerHTML=div接收一个创建的对象，会出现显示不正常变为一个字符串（[object HTMLDivElem
JS常见的兼容性问题汇总
Calla_Lj的博客
04-26 3095
JS常见的兼容性问题 1） 滚动条： document.documentElement.scrollTop||document.body.scrollTop 获取样式兼容 function getStyle(dom, styleName){ return dom.currentStyle? dom.currentStyle[styleName] getComputedStyle(dom)[st...
100多个很有用的JavaScript函数以及基础写法汇总
05-04
JavaScript是一种广泛用于网页和网络应用的编程语言，它在前端开发中扮演着至关重要的角色。本文将详细介绍从给定文件中提炼出的一些JavaScript基础知识和常见函数。 1. `document.write("")` 是一个输出语句，常...
Javascript知识点汇总.doc
09-30
JavaScript知识点汇总 JavaScript是一种广泛使用的轻量级编程语言，主要用于客户端网页交互，为HTML和Web应用添加动态功能。本文将全面概述JavaScript的核心概念、语法结构以及常见应用。 1. JavaScript定义 ...
DOM操作一些常用的属性汇总
12-09
除了以上介绍的属性，DOM还提供了其他一些关键属性，如`textContent`用于获取或设置元素的纯文本内容，`style`属性还可以用来获取和设置元素的所有CSS属性，而`appendChild()`、`removeChild()`、`insertBefore()`等...
javascript appendChild,innerHTML,join性能比较代码
12-10
代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head> <title>appendChild,innerHTML,join</title> [removed]<!– //使用appendChild()方法添加span标签 function AppendD
innerHTML &&appendChild
zhangluxu的专栏
07-11 262
innerHTML: 属性设置或返回表格行的开始和结束标签之间的 HTML。eg:var table = documet.createElement("table"); table.border=1; table.innerHTML ="some words...";同样也可以取
HTML5的child,HTML中appendChild和innerHTML的区别
weixin_39845461的博客
06-18 496
1、在执行速度的比较上，使用appendChild比innerHTML要快，特别是内容包括html标记时，appendChild明显要快于innerHTML，这可能是因为innerHTML在铺到页面之前还要对内容进行解析才能铺到页面上，当包含html标记过多时，innerHTML速度会明显变慢。可运行下面的代码测试：/p>1.0 Transitional//EN""http://www.w3...
Web前端之操作元素内容的方法、介绍、区别、createTextNode、createElement、appendChild、textConten、innerText、innerHTML、append
我的"CSDN"博客主页地址：https://mengjian.blog.csdn.net/
06-28 6017
Web前端之操作元素内容的方法、介绍、区别、createTextNode、createElement、appendChild、textConten、innerText、innerHTML、append
JS innerHTML appendChild append
豫迷糊的码上生活
11-21 458
appendChild() 只能传一个节点，且不直接支持传字符串【需要 appendChild(document.createTextElement(‘字符串’))代替】，返回追加的 Node 节点； 若 appendChild() 的参数是页面存在的一个元素，则执行后原来的元素会被移除； 例如：document.getElement(“a”).appendChild(document.getElementByIdx(“b”))，执行后，b 元素会先被移除，然后再添加到 a 中。 innerHTML 添加的
HTML中appendChild和innerHTML的区别
05-03 1079
1、在执行速度的比较上，使用appendChild比innerHTML要快，特别是内容包括html标记时，appendChild明显要快于innerHTML，这可能是因为innerHTML在铺到页面之前还要对内容进行解析才能铺到页面上，当包含html标记过多时，innerHTML速度会明显变慢。 可运行下面的代码测试：    new document
JS 之 appendChild 与 innerHTML
Rand Tsui
07-27 3044
问题：手机滑动分页，每次向下滑到低，就会请求数据并增加 n 个 item ，至于这个 item是什么，item 就是一类相似的 元素，它们有共同的父元素，那么，我要如何添加这几个item？ 方式有两种，第一种很简单，修改父元素的innerHTML，原来的加上新的。 第二种，用appendChild方式，有几个加几个。 以上两种方法比较 第一种方式会删除父元素里面内容，然后重新写入所有ite
innerText和innerHTML区别
05-20
`innerText`和`innerHTML`都是JavaScript中用于访问DOM元素内容的属性，但它们之间有一些区别。 `innerText`属性返回元素的文本内容，不包含HTML标记和注释。这意味着如果元素中包含HTML标记或注释，它们将被忽略。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值