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 ...
随机推荐
- 【LeetCode OJ】Populating Next Right Pointers in Each Node II
Problem Link: http://oj.leetcode.com/problems/populating-next-right-pointers-in-each-node-ii/ OK... ...
- 【LeetCode OJ】Evaluate Reverse Polish Notation
Problem link: http://oj.leetcode.com/problems/evaluate-reverse-polish-notation/ According to the wik ...
- JLOI 斯迈利的赌注
直接高精度模拟,加上简单贪心 Program XJOI2263; ..] of longint; var a,b:arr; s1,s2:ansistring; i,j:longint; sum:int ...
- Inno Setup 安装前卸载原程序
Inno Setup 安装前卸载原程序 分类: Install Setup 2013-02-02 15:53 2315人阅读 评论(0) 收藏 举报 很多時候我們需要在安裝文件之前卸載原有的程序而不是 ...
- Android FM模块学习之一 FM启动流程
最近在学习FM模块,FM是一个值得学习的模块,可以从上层看到底层. 上层就是FM的按扭操作和界面显示,从而调用到FM底层驱动来实现广播收听的功能. FM启动流程:如下图: 先进入FMRadio.jav ...
- HDU 1005 Number Sequence（AC代码）
#include <stdio.h> #include <string.h> int main() { int a,b,n; int i; ]={}; f[]=; f[]=; ...
- toLocaleString
- Myeclipse里导入jQuery.js 时出现错误打红叉的解决方法
http://www.jb51.net/softjc/215710.html 解决方案:如上图所示:右击 jquery-2.1.1.min.js -->MyEclipse --> ①先点击 ...
- telnet命令使用示例
导读 telnet命令通常用来远程登录.telnet程序是基于TELNET协议的远程登录客户端程序.Telnet协议是TCP/IP协议族中的一员,是Internet远程登录服务的标准协议和主要方式.它 ...
- CentOS 6.6 中设置Terminal快捷键
排版比较乱,参见 https://www.zybuluo.com/Jpz/note/144583 CentOS 6.6 中设置Terminal快捷键 Linux开发环境配置 Terminal是Cent ...