创建节点 模仿发布留言

2024-03-29 05:58

本文主要是介绍创建节点 模仿发布留言,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

        <textarea></textarea><button>发送</button><ul></ul>

HTML代码

            //获取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');

js代码    首先获取元素

             //给btn按钮绑定点击事件btn.onclick = function(){//判断文本框里是否为控if(text.value == ''){alert('请输入....');}else{//利用createElement创建元素节点livar li = document.createElement('li');//把文本域里的值给新创建的元素节点  text.value(文本域的值)li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";//把创建的元素节点添加到ul里     ul.children[0](使新添加的元素节点永远在第一排)ul.insertBefore(li,ul.children[0]);//删除节点,删除的是当前a所在的li  删除的是a的父亲livar as = document.querySelectorAll('a');  //获取元素//循环for(var i = 0;i<as.length;i++){as[i].onclick = function(){//this当前a   parentNode获取a的父对象    this.parentNode是当前a的父亲li//删除节点,必须是删除父亲中的一个儿子   this.parentNode(li)的父亲是ul  所以前面是ulul.removeChild(this.parentNode); }}}}</script>

首选给btn按钮注册点击事件

text.value判断文本域里是否为空,如果为空alert('请输入....');

如果不为空

利用createElement创建元素节点

点击发送之后文本域的值要赋给创建的元素节点li  但是要在创建了有了li之后赋值 li.innerHTML = text.value

+ "<a href='javascript:;'>删除</a>"; 后面加一个删除

添加节点 把创建的节点添加到 ul 里  ul.insertBefore(li,ul.children[0]);

var as = document.querySelectorAll('a');  获取元素

循环添加鼠标点击事件

  注意:删除节点是删除父亲中的一个儿子    a是li的一个儿子,而我们是要删除整个li

this.parentNode 当前a的父对象,也就是li   li的父级是ul

ul.removeChild(this.parentNode); 所以删除节点是这样

这篇关于创建节点 模仿发布留言的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/857788

相关文章

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识:线程号唯一、创建方式、属性设置(如分离状态与栈大小)、回收机制(join/detach)、退出方法(返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.

创建Java keystore文件的完整指南及详细步骤

《创建Javakeystore文件的完整指南及详细步骤》本文详解Java中keystore的创建与配置,涵盖私钥管理、自签名与CA证书生成、SSL/TLS应用,强调安全存储及验证机制,确保通信加密和... 目录1. 秘密键(私钥)的理解与管理私钥的定义与重要性私钥的管理策略私钥的生成与存储2. 证书的创建与

C++链表的虚拟头节点实现细节及注意事项

《C++链表的虚拟头节点实现细节及注意事项》虚拟头节点是链表操作中极为实用的设计技巧,它通过在链表真实头部前添加一个特殊节点,有效简化边界条件处理,:本文主要介绍C++链表的虚拟头节点实现细节及注... 目录C++链表虚拟头节点(Dummy Head)一、虚拟头节点的本质与核心作用1. 定义2. 核心价值二

python如何创建等差数列

《python如何创建等差数列》:本文主要介绍python如何创建等差数列的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python创建等差数列例题运行代码回车输出结果总结python创建等差数列import numpy as np x=int(in

怎么用idea创建一个SpringBoot项目

《怎么用idea创建一个SpringBoot项目》本文介绍了在IDEA中创建SpringBoot项目的步骤,包括环境准备(JDK1.8+、Maven3.2.5+)、使用SpringInitializr... 目录如何在idea中创建一个SpringBoot项目环境准备1.1打开IDEA,点击New新建一个项

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》:本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho

MySQL 用户创建与授权最佳实践

《MySQL用户创建与授权最佳实践》在MySQL中,用户管理和权限控制是数据库安全的重要组成部分,下面详细介绍如何在MySQL中创建用户并授予适当的权限,感兴趣的朋友跟随小编一起看看吧... 目录mysql 用户创建与授权详解一、MySQL用户管理基础1. 用户账户组成2. 查看现有用户二、创建用户1. 基

Python中使用uv创建环境及原理举例详解

《Python中使用uv创建环境及原理举例详解》uv是Astral团队开发的高性能Python工具,整合包管理、虚拟环境、Python版本控制等功能,:本文主要介绍Python中使用uv创建环境及... 目录一、uv工具简介核心特点:二、安装uv1. 通过pip安装2. 通过脚本安装验证安装:配置镜像源(可

Java中实现线程的创建和启动的方法

《Java中实现线程的创建和启动的方法》在Java中,实现线程的创建和启动是两个不同但紧密相关的概念,理解为什么要启动线程(调用start()方法)而非直接调用run()方法,是掌握多线程编程的关键,... 目录1. 线程的生命周期2. start() vs run() 的本质区别3. 为什么必须通过 st