原生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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • asp.net 框架页刷新时如何保留或返回之前的页面

    asp.net 框架页刷新时如何保留或返回之前的页面

    2021年8月6日
    61
  • java单例模式——详解JAVA单例模式及8种实现方式

    java单例模式——详解JAVA单例模式及8种实现方式##单例模式是最简单也是最基础的设计模式之一,下边一起学习一下单例模式!一.单例模式的定义:单例模式确保某个类只有一个实例,而且自行实例化并向整个系统提供这个实例。在计算机系统中,线程池、缓存、日志对象、对话框、打印机、显卡的驱动程序对象常被设计成单例。这些应用都或多或少具有资源管理器的功能。每台计算机可以有若干个打印机,但只能有一个PrinterSpooler,以避免两个打印作业同时输出到打印机中。每台计算机可以有若干通信端口,系统应当集中管理这些通信端口,以避免一个通信端口同时被两个请求同时调用

    2022年7月8日
    13
  • Unity3D协程介绍 以及 使用[通俗易懂]

    Unity3D协程介绍 以及 使用[通俗易懂]作者ChevyRay ,2013年9月28日,snaker7译 原文地址:http://unitypatterns.com/introduction-to-coroutines/在Unity中,协程(Coroutines)的形式是我最喜欢的功能之一,几乎在所有的项目中,我都会使用它来控制运动,序列,以及对象的行为。在这个教程中,我将会说明协程是如何工作的,并且会附上一些例子来介绍

    2022年6月25日
    27
  • mysql connector 如何使用_MySQL Connector/Net 的简略使用

    mysql connector 如何使用_MySQL Connector/Net 的简略使用mysqlConnector/Net的简单使用首先,新建工程(WindowsApplication)然后,增加引用(MySql.Data)注意:根据使用.net版本的不同而选择MySql.Data版本之后,放置控件3个TextBox,2个ComboBox,1个DataGridView等等密码框设置下拉框设置数据格设置连接按钮代码:stringconnStr=string.Format…

    2022年7月15日
    16
  • Ewebeditor最新漏洞及漏洞大全

    Ewebeditor最新漏洞及漏洞大全

    2021年12月7日
    47
  • WPF Visifire使用

    WPF Visifire使用引言:  由于项目中需要使用Visifire所以自己就写了一些demo,大家一起共享!基础Visifire图表的展示1.Visifire的创建需要引用的DLL包【WPFToolkit.dll;WPFVisifire.Charts;WPFVisifire.Gauges(这个以后会用到)】2.我们开始创建简单的Visifire图表第一步:前台代码

    2022年7月21日
    11

发表回复

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

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