原生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年6月22日 上午11:36
下一篇 2022年6月22日 上午11:36


相关推荐

  • gridbagconstraints什么意思_gridbaglayout布局

    gridbagconstraints什么意思_gridbaglayout布局GridBagConstraints的具体参考为:http://download.oracle.com/technetwork/java/javase/6/docs/zh/api/java/awt/GridBagConstraints.html下面是构造函数:publicGridBagConstraints(intgridx,…

    2025年9月5日
    6
  • 仪器保养 | 安捷伦DSO-X 2002A示波器自检测/自校准

    仪器保养 | 安捷伦DSO-X 2002A示波器自检测/自校准安捷伦DSO-X2002A示波器自检测、自校准首先上电开机1.按下Utility-服务-Diagnostics-硬件本机自检-前面板自检2.按下Utility-服务-Calibration–按下后盖CAL-开始用户校准-根据提示完成操作感兴趣的话就跟安迪一起来学习吧~仪器保养|安捷伦DSO-X2002A示波器自检测/自校准…

    2022年10月11日
    4
  • 从人类智能到智能体:Agent的发展与治理

    从人类智能到智能体:Agent的发展与治理

    2026年3月16日
    1
  • SSRS报表开发

    SSRS报表开发我们再进行 SSRS 报表开发的时候经常会用到两个工具 一个是 SQLSERVER 安装集成的 IDEBIDS SQLServerBus 另一个是报表生成器 ReportBuilde 如果是比较熟悉数据库技术和 VS 开发环境的开发人员 建议使用的前者 如果是普通的报表使用者 建议使用后者 因为后者的 UI UE

    2026年3月26日
    2
  • QPM 准备优化前的思考

    QPM 准备优化前的思考QPM 开源地址 https github com ZhuoKeTeam QPM 重复的工作能否减少 必须可以 每天重复着同样的工作 周而复始 枯燥乏味 因此衍生出了自动化操作 比如脚本 工具等 让人们可以把时间节省下来 做更多的事情 Android 如何进行性能优化 抓包 Charles Fiddler Wireshark AndroidStudi DDMS Logc

    2026年3月16日
    3
  • 紫光同创国产FPGA学习之了解器件和软件

    紫光同创国产FPGA学习之了解器件和软件使用有一段时间了 感觉还可以吧 如果一年没啥大情况的话 低端使用就没啥问题了 我做 FPGA 也有 5 年了 从整体来说 感觉紫光的 FPGA 使用起来难度不大 国产的 便宜不说 技术支持也比较容易 当然技术支持人数少了点也没什么办法的 价格对市场来说很重要哈哈 在加上中兴事件 感觉有必要详细学习国产 FPGA 首选来个官方网站 下载软件 申请许可等

    2026年3月26日
    2

发表回复

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

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