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>
