js添加元素的三种方法

js添加元素的三种方法点击按钮变为:提前说下结论:善用innerHTML属性,但是不能过于依赖,否则会造成改动过大,不利于程序稳定性。首先,结构部分为:<div><ol><liid=”spe”>speedo</li><li>arena</li><li>balenire</li></ol>.

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

在这里插入图片描述
点击按钮变为:
在这里插入图片描述
提前说下结论:善用innerHTML属性,但是不能过于依赖,否则会造成改动过大,不利于程序稳定性。
首先,结构部分为:

<div>
        <ol>
            <li id="spe">speedo</li>
            <li>arena</li>
            <li>balenire</li>
        </ol>
        <button id="btn01" onclick="myActive()">new a list on the summit</button>
    </div>
  • 方法一:推荐使用,变化最小,代码量最少
    <script type="text/javascript"> const ol = document.querySelector("ol"); const spe = document.getElementById("spe"); const btn01 = document.getElementById("btn01"); const swa = document.createElement("li"); function myActive() { 
      swa.innerHTML = "swans"; ol.insertBefore(swa,spe); } </script>
  • 方法二:代码量大,但可以深入理解DOM;改变小;作为次推荐选项。
  <script type="text/javascript"> const ol = document.querySelector("ol"); const spe = document.getElementById("spe"); const btn01 = document.getElementById("btn01"); // 新建li元素 const swa = document.createElement("li"); //新建文本节点 const tx = document.createTextNode("swans"); function myActive() { 
      //将文本节点设为li节点的子节点 swa.appendChild(tx); //将li节点放在相应位置 ol.insertBefore(swa, spe); } </script>
  • 方法三:代码量最小,但是改动较大,不推荐使用
	<script type="text/javascript"> const ol = document.querySelector("ol"); const btn01 = document.getElementById("btn01"); function myActive() { 
      var temp = ol.innerHTML; ol.innerHTML = "<li>swans</li>"; ol.innerHTML += temp; } </script>

向有序列表尾部添加选项,使用方法三,代码量会相对更少,但是同样不推荐使用,只领会令人惊叹的innerHTML属性就好。

	<script type="text/javascript"> const ol = document.querySelector("ol"); const btn01 = document.getElementById("btn01"); function myActive() { 
      ol.innerHTML += "<li>swans</li>"; } </script>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

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

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

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

(0)


相关推荐

  • 留言板asp源码下载_网页留言板源码

    留言板asp源码下载_网页留言板源码用ASP+access+FrontPage实现留言板有几种方法??只需要写出简单思路,.首先,留言页面。其次,留言数据处理页面,该页面把数据插入到数据库中。再次,从数据库中选取数据出来。最后,显示出来。。哪位高手可以帮我做个简单初学者ASP留言板!明天早晨急需!扣扣。这个是简单的留言板代码,数据库就要你自己设计了,网页代码是:已经做得了大概~还有删除和修改没完成~请高手帮助~既然别的…

  • Typora+PicGo+Gitee+坚果云实现Win+Linux+手机端完美Markdown云笔记套件

    Typora+PicGo+Gitee+坚果云实现Win+Linux+手机端完美Markdown云笔记套件Typora+PicGo+Gitee+坚果云实现Win+Linux+手机端完美Markdown云笔记套件写在前面Typora是什么?PicGo是什么?为什么用Gitee?为什么用坚果云?1.安装Typora2.安装PicGo3.安装nodejs4.安装Gitee插件5.注册并配置Gitee6.配置PicGo的Gitee图床设置7.配置Typora的图床8.手机端查看写在前面关于笔记软件,多年…

  • 二分法注意点_二分法怎么用

    二分法注意点_二分法怎么用思路我相信对很多读者朋友来说,编写二分查找的算法代码属于玄学编程,虽然看起来很简单,就是会出错,要么会漏个等号,要么少加个1。不要气馁,因为二分查找其实并不简单。思路很简单,细节是魔鬼。本文以问答的形式,探究几个最常用的二分查找场景:寻找一个数、寻找左侧边界、寻找右侧边界。而且,我们就是要深入细节,比如不等号是否应该带等号,mid是否应该加一等等。分析这些细节的差异以及出现这些差异的原因,保证你能灵活准确地写出正确的二分查找算法。零、二分查找框架intbinarySearch(int[]

    2022年10月25日
  • Android开发之《Android应用开发揭秘》UI事件汇总

    Android开发之《Android应用开发揭秘》UI事件汇总Android开发之《Android应用开发揭秘》UI事件汇总/* * Android开发之《Android应用开发揭秘》UI事件汇总 * 北京Android俱乐部群:167839253 * Createdon:2011-12-01 * Author:blueeagle * Email:liujiaxiang@gmail.com */思想跑毛是很可

  • flyio 无感刷新token

    flyio 无感刷新tokennpminstallflyiovarFly=require(‘flyio/dist/npm/wx’);varfly=newFly();<!DOCTYPEhtml><html><headlang=”zh-cmn-Hans”><metacharset=”UTF-8″><title>Fly.jsDemo</title><metaname=”renderer”content

  • hbase拾遗「建议收藏」

    hbase拾遗「建议收藏」hbase拾遗

发表回复

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

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