js 添加、删除DOM元素

news2024/11/15 4:32:12

1. js添加、删除DOM元素

1.1. 添加DOM元素

1.1.1. appendChild()方法

  该方法添加的元素位于父元素的末尾，使用方法：
parentNode.appenChild(NewNode) // parentNode是需要添加元素的容器，NewNode是新添加的元素
  创建一个li元素并添加到ul的末尾：

       var ulDom = document.getElementById("ul_id");
                var htmlStr =
                    //`<div class="member-li-layout" οnclick="clickFunc(${index})">
                    `<div class="member-li-layout">
                           <div class="member-item-layout">
                                 <span class="member-item-layout">姓名：</span>
                                 <span class="member-item-content">
                                       ${item.name}
                                 </span>
                           </div>   
                           <div class="member-item-layout">
                                 <span class="userName">班级：</span>
                                 <span class="member-item-content">
                                      ${item.classroom}
                                 </span>
                           </div>                     
                     </div>`;
                var liDom = document.createElement("li");
                liDom.setAttribute('class', `member-li-body`);
                liDom.setAttribute('data-name', item.name);
                liDom.innerHTML = htmlStr;
                ulDom.appendChild(liDom);

1.1.2. insertBefore()方法

  该方法可以将元素添加到指定位置，使用方法：
// parentNode是需要添加元素的容器，NewNode是新添加的元素, beforeNode是添加在哪个元素之前
  parentNode.insertBefore(newNode, beforeNode)
  创建一个li元素并添加在第二个li元素之前：

const ulNode = document.querySelectorAll('.list')[0],
	  liNodes = document.querySelectorAll('.item'),
	  liNode = document.createElement('li');
liNode.className = 'item';
liNode.innerHTML = 4;
ulNode.insertBefore(liNode, liNodes[1]);

1.2. 删除DOM元素

1.2.1. removeChid()方法

  该方法用于删除指定元素，使用方法：
  parentNode.removeChild(removeNode) // parentNode是需要删除元素的容器，removeNode是要删除的元素

   // //方法一：删除自身
    // var box=document.getElementById("ul_id");
    // box.remove();
    //方法二：删除子节点
    var ulDom = document.getElementById("ul_id");
    var lis = ulDom.querySelectorAll('li');
    for (i = lis.length; i > 0; i--) {
        ulDom.removeChild(lis[i - 1]);
    };

1.2.2. remove()方法

   // //方法一：删除自身
    /var box=document.getElementById("ul_id");
    // box.remove();

1.3. 示例代码

1.3.1. page-dom.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>点赞</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script type="text/javascript" src="../static/js/init-rem.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/mui.min.css"/>
    <script type="text/javascript" src="../static/js/mui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="../css/page-dom.css"/>
    <script type="text/javascript" src="../static/js/jquery-3.1.1.min.js"></script>
</head>
<body>
<section class="base-title-layout2">
    <div class="base-title-bar2">
         <span class="base-title-back" onclick="history.go(-1)">
             <img src="../img/icon/icon_back.png"/>
         </span>
        <h1>dom</h1>
        <a class="base-title-back"></a>
    </div>
</section>
<div class="base-page-layout">
    <ul id="ul_id" class="member-ul-body"></ul>
</div>
<script type="text/javascript" src="../js/page-dom.js"></script>
</body>
</html>

1.3.2. page-dom.css


.member-ul-body {
    overflow-x: hidden;
}
.member-ul-body li {

    border-radius: 0.2rem;
    margin: 0.2rem 0.01rem;
    padding: 0.2rem 0.2rem;
}
.member-li-body  {
    background: #fff;
}
.member-li-layout {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.member-item-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0.05rem 0;
}
.member-item-title {
    color: black;
    text-align: center;
    font-size: 0.3rem;
}

.member-item-content {
    color: #666666;
    text-align: center;
    font-size: 0.3rem;
}
.member-bottom-layout {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    -webkit-align-items: center;
    padding: 0 0.3rem;
}

1.3.3. page-dom.js

let myArr
$(function () {
    getData()
});

function getData() {
    //获取json中数据
    $.getJSON(`../json/domJson.json`,
        function (res) {
            myArr = res.rows;
            myArr.forEach(function (item, index) {
                var ulDom = document.getElementById("ul_id");
                var htmlStr =
                    //`<div class="member-li-layout" οnclick="clickFunc(${index})">
                    `<div class="member-li-layout">
                           <div class="member-item-layout">
                                 <span class="member-item-layout">姓名：</span>
                                 <span class="member-item-content">
                                       ${item.name}
                                 </span>
                           </div>   
                           <div class="member-item-layout">
                                 <span class="userName">班级：</span>
                                 <span class="member-item-content">
                                      ${item.classroom}
                                 </span>
                           </div>                     
                     </div>`;
                var liDom = document.createElement("li");
                liDom.setAttribute('class', `member-li-body`);
                liDom.setAttribute('data-name', item.name);
                liDom.innerHTML = htmlStr;
                ulDom.appendChild(liDom);
            })
            //详情
            goDetail()
            //清除数据
            //clearData()
        })
}

/**
 * 点击item
 */
function clickFunc(index) {
    console.log("name:" + myArr[index].name)
}
/**
 * 清除数据
 */
function clearData() {
    // //方法一：删除自身
    // var box=document.getElementById("ul_id");
    // box.remove();
    //方法二：删除子节点
    var ulDom = document.getElementById("ul_id");
    var lis = ulDom.querySelectorAll('li');
    for (i = lis.length; i > 0; i--) {
        ulDom.removeChild(lis[i - 1]);
    }
}

/**
 * 详情
 */
function goDetail() {
    var lis = document.querySelector('#ul_id')
        .querySelectorAll('li');
    for (i = 0; i < lis.length; i++) {
        //点击item
        lis[i].addEventListener('tap', function () {
            var name = $(this).attr('data-name');
            console.log("name:" + name)
        });
    }
}

1.3.4. domJson.json

{
  "msg": "信息",
  "code": 200,
  "rows": [
    {
      "name": "云兮",
      "classroom": "一年级4班"
    },
    {
      "name": "晨曦",
      "classroom": "二年级1班"
    },
    {
      "name": "佳宁",
      "classroom": "三班2班"
    }
  ]
}

1.4. 效果图

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1502755.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

数据结构与算法-哈希表

数据结构与算法-哈希表

引言 在计算机科学中&#xff0c;数据结构与算法是构建高效软件系统的关键基石。其中&#xff0c;哈希表作为一种非常实用的数据结构&#xff0c;以其快速查找、插入和删除等特性&#xff0c;在诸多领域发挥着无可替代的作用。本文将深入探讨哈希表的工作原理、实现细节以及其在…
阅读更多...
Qt Creator常见问题解决方法

Qt Creator常见问题解决方法

Qt Creator源文件重命名的正确方法 光改文件名是不够的&#xff0c;还要在.pro文件中的SOURCES中把名字改成之后的。 中文乱码&#xff08;字符集设置&#xff09; 菜单栏-工具-选项-设置为utf-8
阅读更多...
Reset Verification IP

Reset Verification IP

Reset Verification IP IP 参数及接口 IP 例化界面 相关函数 assert_reset //置位复位信号 < hierarchy_path>.assert_reset();deassert_reset //取消置位复位信号 < hierarchy_path>.deassert_reset();set_master_mode //设置 RST_VIP 模式为 Master < hi…
阅读更多...
STM32基本定时功能

STM32基本定时功能

1、定时器就是计数器。 2、怎么计数&#xff1f; 3、我们需要有一恒定频率的方波信号&#xff0c;再加上一个寄存器。 4、比如每来一个上升沿信号&#xff0c;寄存器值加1&#xff0c;就可以完成计数。 5、假设方波频率是100Hz&#xff0c;也就是1秒100个脉冲。…
阅读更多...
严刑拷打_微服务

严刑拷打_微服务

文章详情 &#xff1a;&#x1f60a; 作者&#xff1a;Lion J &#x1f496; 主页&#xff1a; https://blog.csdn.net/weixin_69252724 &#x1f389; 主题&#xff1a; 微服务相关知识 ⏱️ 创作时间&#xff1a;2024年03月8日 ———————————————— 文章目…
阅读更多...
[数据结构]队列

[数据结构]队列

1.队列的概念及结构 队列&#xff1a;只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表&#xff0c;队列具有先进先出 FIFO(First In First Out) 入队列&#xff1a;进行插入操作的一端称为队尾 出队列&#xff1a;进行删除操作的一端称为队头 2…
阅读更多...
Dynamo3.0.3——六年来最大的更新

Dynamo3.0.3——六年来最大的更新

Hello大家好&#xff01;我是九哥~ 前几天&#xff0c;Dynamo Core 3.0.0版本发布&#xff0c;迎来了Dynamo六年来最大的一次更新。最大的改变&#xff0c;是更新到了.net8&#xff0c;这回对Dynamo节点包产生不小影响。接下来我们详细看一下都有哪些变化。 首先&#xff0…
阅读更多...
【vue.js】文档解读【day 3】 | 列表渲染

【vue.js】文档解读【day 3】 | 列表渲染

如果阅读有疑问的话&#xff0c;欢迎评论或私信&#xff01;&#xff01; 文章目录 列表渲染v-forv-for 与对象在 v-for 里使用范围值template 上的 v-forv-for与v-if通过key管理状态组件上使用v-for数组变化侦测 列表渲染 v-for 在我们想要渲染出一个数组中的元素时&#xf…
阅读更多...
node-day3-es6模块化+webpack

node-day3-es6模块化+webpack

模块化 一、模块化分类 回顾node.js模块化&#xff1a; node.js遵循了CommonJS的模块化规范【见下文】&#xff0c;其中&#xff1a; 1.导入其它模块使用require()方法 2.模块对外共享成员使用module.exports对象 模块化的好处&#xff1a; 大家都遵守同样的模块化规范写代…
阅读更多...
Only fullscreen opaque activities can request orientation

Only fullscreen opaque activities can request orientation

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、商业变现、人工智能等&#xff0c;希望大家多多支持。 未经允许不得转载 目录 一、导读二、概览三、分析四、 推荐阅…
阅读更多...
【电工学笔记】上册第一、二章

【电工学笔记】上册第一、二章

电工学 上次考试败在了单位&#xff0c;这次单位 一定要记熟。 第一章 电源或信号源的电压或电流称为激励,它推动电路工作; 由激励所产生的电压和电流称为响应。 复杂电路中,一般无法事先判断某个支路电流的 实际方向或者某个电路元件电压的实际方向 140V/4算不出总电阻的 …
阅读更多...
leetcode26---删除有序数组中的重复项

leetcode26---删除有序数组中的重复项

大家好&#xff0c;我是大唐&#xff0c;刚刷完了几道经典的leetcode题&#xff0c;今天给大家分享一道leetcode上面的快慢指针经典题型---删除有序数组中的重复项&#xff0c;我们往下看。 题目描述 给你一个 非严格递增排列 的数组 nums &#xff0c;请你原地删除重复出现的元…
阅读更多...
【数据结构】拆分详解 - 排序

【数据结构】拆分详解 - 排序

文章目录 前言一、排序的概念及其运用  1.1 排序的概念  1.2 排序的运用  1.3 常见的排序算法  1.4 排序算法性能测试对比函数 二、常见排序算法的实现  2.1 插入排序   2.1.1  基本思想   2.1.2  直接插入排序   2.1.3  希尔排序     1. 预排序&am…
阅读更多...
Dataset 读取数据

Dataset 读取数据

Dataset 读取数据 from torch.utils.data import Dataset from PIL import Image import osclass Mydata(Dataset):def __init__(self,root_dir,label_dir):self.root_dir root_dir #根目录 dataset/trainself.label_dir label_dir #标签的后面链接目录 ants_ima…
阅读更多...
ChatGPT 提问没反应了，怎么办？4种方法！试试看

ChatGPT 提问没反应了，怎么办？4种方法！试试看

用了将近 1 年的 ChatGPT 昨天下午提问忽然之间没反应了&#xff0c;有点失落&#xff0c;我原本以为是账号到期了呢。 之后&#xff0c;尝试用谷歌邮箱注册登录也不行。 打开调试一看&#xff0c;接口状态 403 &#xff0c;没有权限了&#xff0c;logout。 怎么办呢&#xf…
阅读更多...
2023年12月CCF-GESP编程能力等级认证Python编程七级真题解析

2023年12月CCF-GESP编程能力等级认证Python编程七级真题解析

本文收录于专栏《Python等级认证CCF-GESP真题解析》，专栏总目录・点这里 一、单选题（每题 2 分，共 30 分） 第1题 假设变量 x 为 float 类型，如果下面代码输入为 100，输出最接近( )。 A.0 B.-5 C.-8 D.8 答案：B 第2题 对于下面动态规划方法实现的函数，以下选项中…
阅读更多...
【Nestjs实操】服务依赖注入

【Nestjs实操】服务依赖注入

在开始学习之前&#xff0c;我们首先准备下开发环境&#xff1a; Node&#xff1a;16.20.2包管理器&#xff1a;pnpmnestjs版本&#xff1a;10.2.1全局安装nestjs命令行&#xff1a;pnpm add -g nestjs/cli 一、初始化项目 执行nest new nestjs-blog&#xff0c;系统会自动创…
阅读更多...
关于 JVM

关于 JVM

1、请你谈谈你对JVM的理解&#xff1f; JVM由JVM运行时数据区&#xff08;图示中蓝色框包含部分&#xff09;、执行引擎、本地库接口、本地方法库组成。 JVM运行时数据区&#xff0c;分为方法区、堆、虚拟机栈、本地方法栈和程序计数器。 1.方法区 Java 虚拟机规范中定…
阅读更多...
黑马点评-异步秒杀实现

黑马点评-异步秒杀实现

异步秒杀思路 我们来回顾一下下单流程 当用户发起请求&#xff0c;此时会请求nginx&#xff0c;nginx会访问到tomcat&#xff0c;而tomcat中的程序&#xff0c;会进行串行操作&#xff0c;分成如下几个步骤 1、查询优惠卷 2、判断秒杀库存是否足够 3、查询订单 4、校验是…
阅读更多...
Draco点云压缩测试

Draco点云压缩测试

ref&#xff1a;https://github.com/google/dracohttps://codelabs.developers.google.com/codelabs/draco-3d/index.html#6 Draco Draco 是一个用于编码压缩和解压缩 3D 几何网格和点云的库&#xff0c;从而改进 3D 图形的存储和传输该代码支持压缩点、连接信息、纹理坐标、颜…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023