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


相关推荐

  • 开源中国招聘新增两大功能,让你的声音更有影响力[通俗易懂]

    开源中国招聘新增两大功能,让你的声音更有影响力

    2022年3月4日
  • webide配置_web vscode

    webide配置_web vscode背景为了解决函数计算本地环境差异和配置繁琐的问题,在此背景下,就有了我们的WebIDE产品,WebIDE能让函数的开发、测试和部署更加流畅,降低了函数计算的学习成本和缩短了函数的开发周期。WebIDE入口地址:https://ide.fc.aliyun.com介绍WebIDE是一个基于H5支持多语言的集成开发环境。相当于VSCo…

    2022年10月18日
  • ModelAndView使用

    ModelAndView使用关于对ModelAndView自己的理解2017年11月27日09:32:55 静风落叶 阅读数:3975   之前学习的时候遇见过这个ModelAndView,但是一直不知道是什么意思,今天在项目里面遇到了,就理解下,加深自己的印象,以下内容均是本人对此理解,欢迎一起留言讨论。   首先ModelAndView分为两部分:model和view。model负责的是从后面接收回来…

    2022年7月18日
  • 详解 JVM Garbage First(G1) 垃圾收集器

    详解 JVM Garbage First(G1) 垃圾收集器版权声明:本文为博主原创文章,转载请联系作者并注明出处。详解JVMGarbageFirst(G1)垃圾收集器前言GarbageFirst(G1)是垃圾收集领域的最新成果,同时也是HotSpot在JVM上力推的垃圾收集器,并赋予取代CMS的使命。如果使用Java8/9,那么有很大可能希望对G1收集器进行评估。本文详细首先对JVM其他的垃圾收集器进行总结,并与G1进

    2022年6月13日
  • scope=prototype有什么作用_prototype和单例模式

    scope=prototype有什么作用_prototype和单例模式@Scope(“prototype”)//多例模式

    2022年8月19日
  • 存储虚拟化概述「建议收藏」

    存储虚拟化概述一、基本概念      存储虚拟化(StorageVirtualization)最通俗的理解就是对存储硬件资源进行抽象化表现。典型的虚拟化包括如下一些情况:屏蔽系统的复杂性,增加或集成新的功能,仿真、整合或分解现有的服务功能等。虚拟化是作用在一个或者多个实体上的,而这些实体则是用来提供存储资源或/及服务的。      虚拟化技术到底是什么,其实广义上来说,就是通

    2022年4月12日

发表回复

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

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