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


相关推荐

  • 使用多线程实现文件的下载_多线程写同一个文件

    使用多线程实现文件的下载_多线程写同一个文件首先,我们要下载一个文件,可以通过多线程的方式快速下载!!!多线程下载文件的步骤:1、首先要知道请求下载的服务器支持断点下载,即支持request头信息中的Range的设置2、然后通过对请求头设置httpRequest.setRequestProperty(“Range”,”bytes=”+startIndex+”-“+endIndex);3、然后获取整个文件的大小4、在……

  • BCGControlBar31 GUI Professional Crack

    BCGControlBar31 GUI Professional CrackBCGControlBarProforMFCversionsΩ578867473Version31.3.Released06/15/2021AnewclassCBCGPPropertyManager(seescreenshot)implementsaneasyandefficientwaytocreateyourapplicationproperties(options)fromXMLfile,bindpropertiestoCBCGPPr.

    2022年10月22日
  • python3安装win32api

    python3安装win32apipython3安装win32api

    2022年10月11日
  • json对象与json字符串_字符数组与字符串的区别

    json对象与json字符串_字符数组与字符串的区别JSON对象有时候在做项目的时候时常将这两个概念弄混淆,尤其是在使用springmvc的时候,后台@RequestBody接受的是一个json格式的字符串,一定是一个字符串。先介绍一下json对象,首先说到对象的概念,对象的属性是可以用:对象.属性进行调用的。例如:varperson={“name”:”tom”,”sex”:”男”,”age”:”24″}//json对象console.l

  • navicat 15激活码(注册激活)

    (navicat 15激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • linux中getchar函数用法,linux getchar函数使用

    linux中getchar函数用法,linux getchar函数使用1函数介绍1)函数原型intgetchar(void);2)函数功能从stdin中读取一个字符。3)返回值返回读取字符的ASCII值或者EOF字符或者出错值。4)头文件#include2函数使用2.1getchar函数的特点Linux下编写的一个例子:#includeintmain(void){charch;intnum;num=0;printf…

    2022年10月18日

发表回复

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

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