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


相关推荐

  • 浅谈ArrayList动态扩容

    浅谈ArrayList动态扩容环境:eclipse,jdk1.8简介ArrayList实现了List接口,继承了AbstractList,底层是数组实现的,一般我们把它认为是可以自增扩容的数组。它是非线程安全的,一般多用于单线程环境下(与Vector最大的区别就是,Vector是线程安全的,所以ArrayList性能相对Vector会好些),它实现了Serializable接口,因此它支持序列化,能够通过序列化传输

  • NLP学习路线总结

    NLP学习路线总结目录1、自然语言处理概述2、自然语言处理入门基础3、自然语言处理的主要技术范畴4、自然语言处理基本点5、特征处理6、模型选择7、NLP常用工具8、NLP语言模型9、快速入门NLP方法10、自然语言处理学习资料1、自然语言处理概述自然语言处理(NaturalLanguageProcessing,NLP)是计算机科学领域与人工智能领域中的一个重要方向…

  • execute executeupdate_executeupdate不执行

    execute executeupdate_executeupdate不执行增、删、改用executeUpdate()返回值为int型,表示被影响的行数例子查用executeQuery()返回的是一个集合.next()表示指针先下一行,还有first()指向第一行、last()指向最后一行、如果有数据就返回true…

  • css如何设置超链接样式

    css如何设置超链接样式css设置超链接样式是通过伪类来实现的 (1):link:设置a对象在未被访问前的样式表属性。(2):visited:设置a对象在其链接地址已被访问过时的样式表属性。(3):hover:设置对象在其鼠标悬停时的样式表属性。(4):active:设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性。  css中关于超链接的四个属性正确顺序为:

  • web网站常见攻击及防范

    web网站常见攻击及防范一个网站建立以后,如果不注意安全方面的问题,很容易被人攻击,下面就讨论一下几种漏洞情况和防止攻击的办法.一.SQL注入所谓SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的

  • 引领创新任重道远 HP刀片工作站浅析「建议收藏」

    引领创新任重道远 HP刀片工作站浅析

发表回复

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

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