原生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

 

 

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • linux中shell变量$#,$@,$0,$1,$2的含义解释

    linux中shell变量$#,$@,$0,$1,$2的含义解释

    2022年3月8日
    40
  • android studio输出文字_androiditem长按删除

    android studio输出文字_androiditem长按删除用EditText实现textView长按复制效果,edittexttextview首先EditText是集成TextView的我们直接将?EditText设置为不可编辑来实现其中重点为:android:background=”@null”//背景设为null,去掉editText下划线android:textCursorDrawable=”@null”//游标设为null,去掉游…

    2022年9月29日
    3
  • Ubuntu20.04修改root用户密码[通俗易懂]

    Ubuntu20.04修改root用户密码[通俗易懂]我们装完Ubuntu20.04之后,就需要设置下root用户的密码。先看看这张图,这是实际操作流程。具体操作如下:1.第一步:执行如下命令,设置密码sudopasswd2.第二步:输入当前用户的密码3.第三步:输入root用户的密码4.第四步:再次输入root用户的密码5.第五步:执行以下命令,切换到root用户suroot6.第六步:输入root用户的密码密码验证通过后就切换到了root用户了!…

    2022年9月28日
    4
  • modelsim10.0d破解问题「建议收藏」

    modelsim10.0d破解问题「建议收藏」前不久老师给我们布置一个题目,网络导纳测量,需要进行相位测量,需要用FPGA实现测频测相,于是开始上马ALTERA的FPGA学习,当然涉及到了quartus和modelsim的安装问题,我之前用的是quartus版本是II版本是11.1sp2,但是安装modelsim10.0c的时候老是出现路径不符合的提示,我在网上搜了很多帖子,别个都说是因为电脑的用户名或组织名是中文,导致无法破解,但是我查了我…

    2022年5月23日
    47
  • Pytest(1)安装与入门[通俗易懂]

    Pytest(1)安装与入门[通俗易懂]pytest介绍pytest是python的一种单元测试框架,与python自带的unittest测试框架类似,但是比unittest框架使用起来更简洁,效率更高。根据pytest的官方网站介绍,它

    2022年7月28日
    7
  • 三极管饱和及深度饱和状态的理解和判断!

    三极管饱和及深度饱和状态的理解和判断!三极管饱和问题总结:1.在实际工作中,常用Ib*β=V/R作为判断临界饱和的条件。根据Ib*β=V/R算出的Ib值,只是使晶体管进入了初始饱和状态,实际上应该取该值的数倍以上,才能达到真正的饱和;倍数越大,饱和程度就越深。2.集电极电阻越大越容易饱和;3.饱和区的现象就是:二个PN结均正偏,IC不受IB之控制问题:基极电流达到多少时三极管饱和?解答:这个值应该是不固定的,它和

    2025年10月25日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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