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 ...
随机推荐
- Reverse Integer ---- LeetCode 007
Reverse digits of an integer. Example1: x = 123, return 321Example2: x = -123, return -321 Solution ...
- 【LeetCode】Best Time to Buy and Sell Stock IV
Best Time to Buy and Sell Stock IV Say you have an array for which the ith element is the price of a ...
- ios学习之 关于Certificate、Provisioning Profile、App ID的介绍及其之间的关系
刚接触iOS开发的人难免会对苹果的各种证书.配置文件等不甚了解,可能你按照网上的教程一步一步的成功申请了真机调试,但是还是对其中的缘由一知半解.这篇文章就对Certificate.Provisioni ...
- HDU 1052
http://acm.hdu.edu.cn/showproblem.php?pid=1052 田忌赛马本质就是一个贪心 res表示田忌的胜利场次 1.田忌最快马快于王的最快马,两个最快马比,res++ ...
- JS运动基础(一)
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- session 原理 数据结构
[原创]转载请保留出处:shoru.cnblogs.com 晋哥哥的私房钱 引言 在web开发中,session是个非常重要的概念.在许多动态网站的开发者看来,session就是一个变量,而且其表现像 ...
- Think Python - Chapter 03 - Functions
3.1 Function callsIn the context of programming, a function is a named sequence of statements that p ...
- 【转】7 Tips to Speed Up Eclipse
技巧一:运行最新版本的JDK和Eclipse 通常,新版本的JDK和Eclipse都会有性能上的优化.请确保你使用的是64位Eclipse并且使用了Oracle的JDK.对于网络开发,需要使用Ecli ...
- web app 的技术参考 -- 来自 【百度移动建站指南】
优化页面性能 考虑到移动设备和移动互联网的特点,在进行移动网站的页面开发设计时,一个总的原则是考虑用户访问的效率,降低页面加载时间. 下面的内容来自百度,然后我自己做了笔记.另外可参考这个系列的文章 ...
- Codeforces Round #280 (Div. 2) A B C 暴力 水 贪心
A. Vanya and Cubes time limit per test 1 second memory limit per test 256 megabytes input standard i ...