使用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 ...
随机推荐
- 第二次正式java web开发项目的总结（回收站恢复）
都说互联网行业加班很是厉害,记得前不久网上还晒出了几个大城市互联网行业的加班排名调查,但是我们公司,或者说我们项目组倒是非常的例外,进公司也差不多半年了,才仅仅上个月有一个周六加过一天班而已. 不过好 ...
- ant中copy操作学习心得(转)
Ant真是太方便了,以前都没注意到它.功能很强大,能创建数据库,配置服务器,部署发布应用……只需要写好build.xml文件,剩下的就交给ant来“安装”你的WEB应用了. Appfuse的第一个an ...
- iphone dev 入门实例3:Delete a Row from UITableView
How To Delete a Row from UITableView I hope you have a better understanding about Model-View-Control ...
- C++程序设计原理与实践
std_lib_facilities.h和VS下创建C++程序方法:下载 目录: 001. Hello,World!
- @Autowired失效
今天发现了一个使用@Autowired但是注入失败的问题. 后来发现原来是一个Validator中有@Autowired , 并试图注入一个service , 但是这个service始终是null , ...
- List集合去重的一种方法 z
需要对一个List<Model>集合去重,情况是该集合中会出现多个Name属性值相同的,但是其他属性值不同的数据. 在这种情况下,需求要只保留其中一个就好. 我觉得遍历和HashSet都不 ...
- tony_linux下网站压力测试工具webbench
webbench最多可以模拟3万个并发连接去测试网站的负载能力,个人感觉要比Apache自带的ab压力测试工具好,安装使用也特别方便. 1.适用系统:Linux 2.编译安装:wget http:// ...
- 运行测试Caused by: java.lang.UnsatisfiedLinkError: no attach in java.library.path错误解决
解决办法:看到错误里面有个Caused by,说我的jdk运行到了32位的了,于是我查看环境变量,发现是昨天设置成32位的没有设置回来,于是设置回64位的jdk就ok了
- springmvc+ajaxFileUpload上传文件(前后台彻底分离的情况下)
首先是导入jar包: web.xml: <servlet> <servlet-name>mvc-dispatcher</servlet-name> <serv ...
- [kuangbin带你飞]专题十五 数位DP
ID Origin Title 62 / 175 Problem A CodeForces 55D Beautiful numbers 30 / 84 Problem B HD ...