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


相关推荐

  • 计算机网络常用端口号大全「建议收藏」

    计算机网络常用端口号大全「建议收藏」一、概述:计算机端口号总数:65535,一般用到的是1~65535,0一般不使用0-1023:系统端口,也叫公认端口,这些端口只有系统特许的进程才能使用; 1024~65535为用户端口:1024-5000:临时端口,一般的应用程序使用1024到4999来进行通讯; 5001-65535:服务器(非特权)端口,用来给用户自定义端口。二、常用端口号:以下均为默认端口号,即未…

    2025年8月24日
    2
  • powerDesigner生成HTML报表

    powerDesigner生成HTML报表报告-GenerateReport

    2022年9月16日
    4
  • 基于Docker的Kafka集群搭建

    基于Docker的Kafka集群搭建1.pulldocker,在机器上下载最新版本的kafka和zookeeper镜像,这里使用的是wurstmeister的镜像dockerpullwurstmeister/kafkadockerpullwurstmeister/zookeeper2.装好的docker镜像3.启动zk容器Dockerrun–d–namezookeeper–p2181:…

    2022年6月9日
    52
  • node 微信公众号开发_nodejs开发指南

    node 微信公众号开发_nodejs开发指南微信是手机用户必备的App,微信最开始只是作为社交通讯应用供用户使用,但随着用户量不断的增加,微信的公众号在微信上表现出来了它强大的一面,微信公众平台具有四大优势:1、平台更加稳固;2.用户关系更加平等;3.信息精选、定位准确; 微信的开放平台,微信公众平台凭借4大优点受到企业喜爱,企业通过微信公众平台把企业中的资讯信息和服务功能在这个平台完美呈现;作为前沿的开发者微信开发势在必行,虽然外面流行的

    2022年8月21日
    5
  • SpringMVC 执行流程

    SpringMVC 执行流程springMVC(javaweb开发框架)1、MVC三层架构:模型(service、dao)、视图(JSP等)、控制器(Controller)什么是mvc?*MVC是模型、视图、控制器的简写,是一种软件设计规范*是将业务逻辑、数据、显示分离的方法来组织代码*MVC主要的作用就是降低了控制器(Controller)和视图(View)之间的双向耦合度*MVC不是一种设计模式、MVC是一种架构模式。当然不同的MVC存在着差异Model(数据模型):提供要展示的数据。因此包含数据和

    2022年6月28日
    25

发表回复

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

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