Dom之标签增删操作
dom操作：THML新增子标签 a标签(appendChild)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签操作</title>
</head>
<body>
<!--定义一个div标签和一个a标签-->
<div id="container">
<div>武功秘籍</div>
<div>家常菜谱</div>
</div>
<a href="http://www.baidu.com" onclick="return AddEle();">添加</a> <script type="text/javascript">
function AddEle(){
// 创建标签,并给标签定义属性和值
var obj = document.createElement('a');
obj.href = 'http://www.baidu.com';
obj.innerText = '如来神掌';
// 设置新标签写入的位置
var container = document.getElementById('container');
// 在指定标签位置写入新标签
container.appendChild(obj);
return false;
} </script> </body>
</html>
效果图：
Dom操作：HTML新增子标签--指定子标签插入位置a标签（insertBefor）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签操作</title>
</head>
<body>
<!--定义一个div标签和一个a标签-->
<div id="container">
<div>武功秘籍</div>
<div>家常菜谱</div>
</div>
<a href="http://www.baidu.com" onclick="return AddEle();">添加</a> <script type="text/javascript">
function AddEle(){
// 创建标签,并给标签定义属性和值
var obj = document.createElement('a');
obj.href = 'http://www.baidu.com';
obj.innerText = '如来神掌';
// 设置新标签写入的位置
var container = document.getElementById('container');
// 在指定标签位置写入新标签
container.appendChild(obj);
container.insertBefore(obj,container.firstChild);
return false;
}
</script>
</body>
</html>
Dom之标签增删操作的更多相关文章
- Dom,查找标签和操作标签
Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...
- javascript select标签的操作
用原生的方法对select标签的增删操作 1.选中某一个option,一般采用 option[i].selected = true 2.添加option首先需要创建一个option的节点,然后插入到 ...
- JavaScript基础DOM介绍和常用操作（5）
day53 参考:https://www.cnblogs.com/liwenzhou/p/8011504.html JavaScript引入方式 location对象 window.location ...
- php配合jquery实现增删操作
后台使用php,前台引用jquery,实现增删操作,代码如下: <script type="text/javascript" src="http://keleyi. ...
- 使用Dom解析器，操作XML里面的信息
import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;impo ...
- js倒计时函数和(js禁用和恢复a标签的操作)
<script type="text/javascript"> /*获取手机号*/ var start_time=60; function get_phone_nums ...
- HTML DOM元素关系与操作
<html> <head><title>DOM元素关系与操作</title></head> <body> <!-- div ...
- jquery的radio和checkbox的标签的操作集合
jquery的radio和checkbox的标签的操作集合: $("input[name='radio_name'][checked]").val(); //选择被选中Radio的 ...
- DOM的查找与操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- linux常用命令:5网络命令
网络命令 1. 指令名称:write 指令所在路径:/usr/bin/write 执行权限:所有用户 语法:write <用户名> 功能描述:给用户发送信息,以Ctrl+D保存结束
- ie7下 滚动条内容不动问题
ie7+ 版式正常 ie7滚动内容不跟着动 解决方法 加上 overflow-x: hidden; overflow-y: auto; *position:relative; *le ...
- [数据结构]KMP小结
KMP小结 By Wine93 2013.9 1.学习链接: http://www.matrix67.com/blog/archives/115 2.个人小结 1.KMP在字符串中匹配中起着巨大作 ...
- Selenium - 封装WebDrivers (C#)
Web element仍然使用OpenQA.Selenium.IWebElement, 本类库将Selenium原装支持的各浏览器统一为OnDriver, 并将常用操作封装. using System ...
- const char* <----- > string
(1) const char* <----- string const char* const_txt_path=txt_path.c_str(); (2) string ...
- ERROR 1130: Host ’...′ is not allowed to connect to this MySQL server
/******************************************************************** * ERROR 1130: Host ’...′ is no ...
- 在yii中使用分页
yii中使用分页很方便,如下两种方法: 在控制器中: 1. $criteria = new CDbCriteria(); //new cdbcriteria数据库$criteria->id = ...
- 兼容性所有浏览器的透明CSS设置
兼容所有浏览器的透明CSS设置: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0. ...
- 万恶的VS2010 快捷键
此随笔用来记录VS的快捷键: 1.ctrl + U :将选定行中的大写置换为小写: 2.ctrl + K,ctrl + C :注释选定行: 3.ctrl + K,ctrl + U :取消注释选定行:
- nohup启动命令（转）
简单而有用的nohup命令在UNIX/LINUX中,普通进程用&符号放到后台运行,如果启动该程序的控制台logout,则该进程随即终止. 要实现守护进程,一种方法是按守护进程的规则去编程(本站 ...