使用JS对HTML标签进行增删改查
以下为通过JS对li标签进行简单的增删改查：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
//定义变量，保存选中的标签
var selectLi;
//定义变量，保存修改了的标签
var editedLi=false;
window.onload=function()
{
//新增li标签到末尾
document.getElementById("insertEnd").onclick = insertEndclick;
//新增li标签到指定位置
var liObj=document.getElementsByTagName("li");
for(var i=0;i<liObj.length;i++)
{
liObj[i].onclick = liChoose;
}
document.getElementById("insert").onclick = insertThere;
//删除指定标签
document.getElementById("delete").onclick = deleteli;
//修改指定标签内容
document.getElementById("edit").onclick = editLi;
//将选中的该标签变为文本框进行内容修改
document.getElementById("edit2").onclick = editLi2;
//将文本框中的内容保存
document.getElementById("save").onclick = saveLi; } //新增li标签到末尾
function insertEndclick()
{
var result = prompt("需要插入的li标签文本：", "小黑");
if (result)
{
var newli = document.createElement("li");
newli.innerHTML = result;
newli.onclick = liChoose;
document.getElementById("ulList").appendChild(newli);
}
} //新增li标签到指定位置
function insertThere()
{
if (selectLi)
{
var result = prompt("需要插入的li标签文本：", "小黑");
if (result) {
var newli = document.createElement("li");
newli.innerHTML = result;
//需要给新增的li标签设置点击事件
newli.onclick = liChoose;
document.getElementById("ulList").insertBefore(newli, selectLi);
}
}
else
{
alert("请先选择要插入的位置");
}
} //高亮选中的标签
function liChoose()
{
var ul = document.getElementsByTagName("li")
for (var i = 0; i < ul.length; i++)
{
ul[i].style.backgroundColor = "white";
}
this.style.backgroundColor = "yellow";
selectLi = this;
} //删除指定标签
function deleteli()
{
if (selectLi)
{
selectLi.parentElement.removeChild(selectLi);
}
else
{
alert("请先选中要删除的标签");
}
} //修改指定标签
function editLi()
{
if(selectLi)
{
var result = prompt("输入修改内容", "大白");
if(result)
{
selectLi.innerHTML = result;
}
}
else
{
alert("请选择要修改的标签");
}
} //将选中的该标签变为文本框进行内容修改
function editLi2()
{
if(selectLi)
{
//创建一个文本框
var newli = document.createElement("input");
newli.type = "text";
//将文本框内容设置为li标签的文本值
newli.value = selectLi.innerHTML;
//将文本框添加到li标签内部
selectLi.removeChild(selectLi.childNodes[0]);
selectLi.appendChild(newli);
editedLi = true;
}
} //将文本框中的内容保存
function saveLi()
{
if (editedLi)
{
var editValue = selectLi.childNodes[0].value;
selectLi.innerHTML = editValue;
}
else
{
alert("没有标签在编辑状态");
}
} </script>
</head>
<body>
<div>
<input type="button" id="insertEnd" value="新增到末尾" />
<input type="button" id="insert" value="新增到指定位置" />
<input type="button" id="delete" value="删除" />
<input type="button" id="edit" value="修改" />
<input type="button" id="edit2" value="将选中标签变为文本标签进行修改" />
<input type="button" id="save" value="保存" />
</div>
<ul id="ulList">
<li>小猫</li>
<li>小鱼</li>
<li>小狗</li>
<li>大象</li>
<li>树懒</li>
</ul>
</body>
</html>
使用JS对HTML标签进行增删改查的更多相关文章
- MVC3.0+knockout.js+Ajax 实现简单的增删改查
MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...
- 用 JS（JavaScript ）实现增删改查
JS小例题 学习内容: 需求 总结: 学习内容: 需求 用 JavaScript 实现简单增删改查 实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HT ...
- Node.js + MySQL 实现数据的增删改查
通过完成一个 todo 应用展示 Node.js + MySQL 增删改查的功能.这里后台使用 Koa 及其相应的一些中间件作为 server 提供服务. 初始化项目 $ mkdir node-cru ...
- node.js中对 mysql 进行增删改查等操作和async，await处理
要对mysql进行操作,我们需要安装一个mysql的库. 一.安装mysql库 npm install mysql --save 二.对mysql进行简单查询操作 const mysql = requ ...
- js的动态表格的增删改查思路
1. 首先我们要知道,动态添加,肯定不是 在页面上写死得,而是通过js调用循环放入到页面上的,我们在写动态表格的时候不要先着急写,我们第一步要做的就是构思,要把自己的逻辑先弄清楚,不然的话,前面是好写 ...
- 通过js代码来制作数据库增删改查插件
代码流程 1.订制表头:table_config 2.订制显示内容: table_config,data_list 3.加载框: 图片,position:fixed 4.-字符串格式化 ...
- js的动态表格的增删改查完整代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- JS对象中属性的增删改查
对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性 对象的分类: 1.内建对象 -在ES标准中定义的对象,在任何的ES的实现中都可以 ...
- node.js操作mysql数据库之增删改查
安装mysql模块 npm install mysql 数据库准备 mysql server所在的机器IP地址是192.168.0.108,登录账户就用root@123456 在mysql中创建tes ...
随机推荐
- 黄聪：C#中WebClient自动判断编码是UTF-8还是GBK，并且有超时判断功能
public class WebDownload : WebClient { private int _timeout; /// <summary> /// 超时时间(毫秒) /// &l ...
- 华人曾与IBM抗衡！ 盘点已远去的IT巨头(转)
[PConline资讯 ]从算盘到计算器,从大型机到个人PC,再到当今火热的移动终端和云计算,人类计算史已经走过了千年之久,现代IT计算领域也经过了百年浮沉.在世界工业领域,IT技术应该是诞生时间最短 ...
- 简单的缓存代理HTTP服务器
http, 演示客户与服务器套接字. http只支持GET操作及硬编码的MIME类型的一小部分(MIME类型是多媒体内容的类型描述符).代理HTTP服务器是单线程的,该线程中每一个请求依次被处 ...
- IDC机房网络测试要求
IDC机房网络质量要求: 我司项目目前覆盖目标机房是国内BGP机房.三线机房.电信机房.联通机房. 要求XXXX IDC机房到目标机房的网络质量,平均丢包≤0.5%,网络延迟≤50ms;高峰期平均丢包 ...
- c++学习-数组
int a[10]; //是个元素,在windows下回报错,linux会输出一个随机数 int a[10]={1,2}; //初始化,其他的为0 数组越界: 为了调高效率, 编译器不会对数组越界做检 ...
- tcpdump学习
#直接启动tcpdump将监视第一个网络接口上所有流过的数据包 -n不解析地址到nametcpdump -n #监视指定网络接口的数据包,不指定则为 eth0tcpdump -i eth1 #监视指定 ...
- 在Where中对列使用函数，将导致其不可索引
在Sql语句的Select部分对字段编写标量函数是完全可以的,但是下面代码: select EmpNo,LastName from Emp 应当写为 select EmpNo,LastName fro ...
- 【JavaScript】创建命名空间，Class，LOG
JxUnderscore(function (J, _, root) { var isWindow, deepObject, Namespace, Class, LOG; /** * 一个对象是否为w ...
- js实现的新闻列表垂直滚动实现详解
js实现的新闻列表垂直滚动实现详解:新闻列表垂直滚动效果在大量的网站都有应用,有点自然是不言而喻的,首先由于网页的空间有限,使用滚动代码可以使用最小的空间提供更多的信息量,还有让网页有了动态的效果,更 ...
- gerrit 配置 apache2 反向代理（转载）
Apache 2 Configuration To run Gerrit behind an Apache server using mod_proxy, enable the necessary A ...