原生js添加元素

原生js添加元素今天做页面使用的mui,因为使用mui情况下无法使用jquery,于是在ajax请求完毕添加元素的时候发现自己竟然对原生js添加元素的方法有点模糊了,真是越活越倒退了,赶紧整理一波。首先最简单的innerHTML,这个不想多说,入门新手喜欢这么用,但他的缺点也很明显:不管你渲染部分还是全部,始终需要替换原先所有的子元素,也就是需要重复渲染,会增加浏览器压力。接下来就是正题了,js推荐是这样…

大家好,又见面了,我是你们的朋友全栈君。

今天做页面使用的mui,因为使用mui情况下无法使用jquery,于是在ajax请求完毕添加元素的时候发现自己竟然对原生js添加元素的方法有点模糊了,真是越活越倒退了,赶紧整理一波。

首先最简单的innerHTML,这个不想多说,入门新手喜欢这么用,但他的缺点也很明显:不管你渲染部分还是全部,始终需要替换原先所有的子元素,也就是需要重复渲染,会增加浏览器压力。

接下来就是正题了,js推荐是这样进行元素添加:

1.创建游离元素节点:let div=document.createElement(“div”);

2.给创建元素添加属性:div.setAttribute(“class”,”className”);注意setAttribute一次只能设置一条属性

3.创建文本节点:let textNode=document.createTextNode(“需要添加的文本”);

4.将文本节点添加到元素节点中div.appendChild(textNode);

5.加元素节点插入文档:Parent.appendChild(div);

 

over

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/152082.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 深度自编码器原理_编码器原理

    深度自编码器原理_编码器原理自编码器的目标:使用少量高阶特征重构输入定义:使用自身的高阶特征编码自己思想:自编码器其实也是一种神经网络,他的输入和输出一致的,借助稀疏编码的思想,目标是使用高阶特征重新组合来重构自己。特点:期望输入和输出一致;希望使用高阶特征来重构自己,而不只是复制像素点。Hinton提出基于信念网络(deepbeliefNetwords,DBN,由多层RBM堆叠而成)可以使用无监督学习逐层训练的贪心算法…

  • 连接器工具错误lnk2019_2019年十大语文错误

    连接器工具错误lnk2019_2019年十大语文错误已编译的函数的函数对符号进行引用或调用,但是链接器在要链接的任何库或对象文件中都找不到符号定义。此错误消息后跟严重错误LNK1120。若要修复错误LNK1120,必须先修复所有LNK2001和LNK2019错误。

  • mybatis获取map的key_mybatis怎么处理结果集

    mybatis获取map的key_mybatis怎么处理结果集实体类:数据库:CREATETABLE`job_title_info`(`_jobtitleid`varchar(255)DEFAULTNULL,`_shortname`varchar(255)DEFAULTNULL,`_fullname`varchar(255)DEFAULTNULL,`_departmentid`varchar…

  • recycleview的优化_recyclerview原理

    recycleview的优化_recyclerview原理最近研究应用流畅度专题时,发现RecyclerView里边的坑真多,有很多可以优化的点,在理解优化点之前,最好对RecyclerView的缓存机制有一些了解,比如得知道CacheView和RecycledViewPool的区别和联系,RecyclerView的绘制流程有一定了解,再来谈RecyclerView的性能提升。缓存机制可以看看这篇文章:基于滑动场景解析RecyclerView的回收复用机…

    2022年10月27日
  • c# 字符串转时间的方式

    c# 字符串转时间的方式**第一种方法**stringtimeStr=”2019-08-28″;DateTimetime=Convert.ToDateTime(timeStr);**第二种:**DateTimeFormatInfotimeForInfo=newDateTimeFormatInfo();timeForInfo.ShortDatePattern=”yyyy/MM/dd”;stringtimeStr1=”2018-09-08″;vartime=Convert.

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号