漫谈原生JS添加元素的两种方法

漫谈原生JS添加元素的两种方法漫谈原生JS添加元素常规方法常规方法是首先创建一个目标元素并赋值给某个变量,但是元素里面内容较多,需要innerHTML赋值,将含有内容的变量赋值给目标元素的变量,最后,将这个目标元素的变量通过appendChild把节点放到指定位置。varli=document.createElement(“li”);varspan=document.createElement(“span”);li.appendChild(span);varelement=document.querySe

大家好,又见面了,我是你们的朋友全栈君。

漫谈原生JS添加元素

常规方法

常规方法是首先创建一个目标元素并赋值给某个变量 ,但是元素里面内容较多,需要innerHTML赋值,将含有内容的变量赋值给目标元素的变量,最后,将这个目标元素的变量通过appendChild把节点放到指定位置。

var li = document.createElement("li");
var span = document.createElement("span");
li.appendChild(span);
var element = document.querySelector(".div1");//添加到指定位置
element.appendChild(lis);

便捷方法

可以直接用insertAdajcentHTML()将目标元素直接添加到指定位置。
此时添加的目标元素直接用字符串形式赋值到变量中。最重要的是注意引号的变化,外单内双或外双内单。

addTab() { 
   
        that.clearclass();//无关
        var li = '<li class="liactive"><span>测试3</span><span class="iconfont icon - guanbi"></span></li';
        var li1 = '<section class="conactive">测试2</section>';
        that.ul.insertAdajcentHTML('beforeend', li);
        that.div.insertAdajcentHTML('beforeend', li1);
        that.index();//无关
    }

insertAdajcentHTML()详解

insertAdacentHTML(“插入的位置”,字符串的名)
插入的位置可以选择以下属性值:
beforebegin–>元素自身的前面
afterbegin–>插入元素内部的第一个子节点之前
beforeend–>插入元素内部的最后一个子节点之后
afterend–>元素自身的后面

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/152095.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • flask jsonify之序列化时的default函数、jsonify序列化自定义对象[通俗易懂]

    flask jsonify之序列化时的default函数、jsonify序列化自定义对象[通俗易懂]目录1.看源码2、重写默认的default函数,实现自己的序列化机制3、把对象转化成字典3.1__dict__的方式3.2、定义keys和__getitem__的方式4、最终的代码实现5、关于default函数的其他知识1.看源码打开site-package,flask,json,__init__.pyjsonify回去调用default()函数,我们…

  • PreparedStatement的用法「建议收藏」

    PreparedStatement的用法「建议收藏」一、用法:PreparedStatement是Statement的子接口,Statement在使用的过程中,直接拼写SQL是很容易出错的且难用的,PreparedStatement带有模版的思想,减少了出错的机率。1、写sql模版,并和PreparedStatement绑定StringsqlsqlTemplate="insertempVALUE(?,?,?)";Prepar…

  • Java8-Stream API

    Java8-Stream API

  • 数据挖掘 韩家炜_数据挖掘的特点

    数据挖掘 韩家炜_数据挖掘的特点第三版25页  数据挖掘又称知识发现(KDD:KnowledgeDiscoveryinDatabase),即“从数据中挖掘知识”。  丰富的数据以及对强有力的数据分析工具的需求,这种情况被描述为“数据丰富,但信息匮乏”。数据挖掘可以看作信息技术自然进化的结果。数据库和数据管理产业在一些关键功能的开发上不断发展:数据收集和数据库创建数据管理(包括数据存储和检索、数据库事务处理)高级数

    2022年10月29日
  • 数据库分区表关联

    数据库分区表关联数据库表分区场景: 现实业务中有两个表关系比较紧密,而且数据量比较大的时候,需要对两个表都进行分区,并能很好的发挥分表作用创建分区数据库表注意: 数据库表最好是在创建的时候就进行分区,不能对已经创建的普通表(堆表)再进行分区变为分区表,否则转换起来比较麻烦。createtableOCS_COLLECT_PEOPLE(COLLECT_IDV

  • Java线程阻塞

    Java线程阻塞

发表回复

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

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