javaScript_BOM_增加删除节点
来源:互联网 发布:linux传送文件命令 编辑:程序博客网 时间:2024/05/21 01:30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>documentss</title>
<script type="text/javascript">
function createNode() {//新增节点
var img1=document.createElement("img");//动态创建图片元素
img1.src="a/img.jpg";
img1.id="img1";
var fatherNode=document.getElementById("form1");
fatherNode.appendChild(img1);//将图片元素添加到form1
}
function removeNode() {//删除节点
var img1=document.getElementById("img1");//动态创建图片元素
// var fatherNode=document.getEletmentById("form1");
// fatherNode.removeChild(img1);//将图片元素删除
img1.parentNode.removeChild(img1);//原理都是找到父节点删除子节点
}
function inerrTest(){
var div1=document.getElementById("div1");
alert(div1.innerText);// innerHTML
}
function attrTest() {
var a1=document.getElementById("a1");
alert(a1.getAttribute("href"));//取得超链接属性
}
function attrModify() {//修改元素属性
var a1=document.getElementById("a1");
a1.setAttribute("href","http://www.sina.com.cn");
a1.innerText="新浪";
}
</script>
</head>
<body>
<!-- 重点document是script重点 BOM对象树 -->
<from id="form1">
<div id="div1" style="width: 200px;height: 100px">
<h4>这是div的一个段落</h4>
<a href="http:www.baidu.com" id="a1">百度</a>
</div>
<input type="button" onclick="createNode();" value="开始测试">
<input type="button" onclick="removeNode();" value="删除节点">
<input type="button" onclick="inerrTest();" value="取得内容">
<input type="button" onclick="attrTest();" value="取得属性">
<input type="button" onclick="attrModify();" value="修改属性">
</from>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>documentss</title>
<script type="text/javascript">
function createNode() {//新增节点
var img1=document.createElement("img");//动态创建图片元素
img1.src="a/img.jpg";
img1.id="img1";
var fatherNode=document.getElementById("form1");
fatherNode.appendChild(img1);//将图片元素添加到form1
}
function removeNode() {//删除节点
var img1=document.getElementById("img1");//动态创建图片元素
// var fatherNode=document.getEletmentById("form1");
// fatherNode.removeChild(img1);//将图片元素删除
img1.parentNode.removeChild(img1);//原理都是找到父节点删除子节点
}
function inerrTest(){
var div1=document.getElementById("div1");
alert(div1.innerText);// innerHTML
}
function attrTest() {
var a1=document.getElementById("a1");
alert(a1.getAttribute("href"));//取得超链接属性
}
function attrModify() {//修改元素属性
var a1=document.getElementById("a1");
a1.setAttribute("href","http://www.sina.com.cn");
a1.innerText="新浪";
}
</script>
</head>
<body>
<!-- 重点document是script重点 BOM对象树 -->
<from id="form1">
<div id="div1" style="width: 200px;height: 100px">
<h4>这是div的一个段落</h4>
<a href="http:www.baidu.com" id="a1">百度</a>
</div>
<input type="button" onclick="createNode();" value="开始测试">
<input type="button" onclick="removeNode();" value="删除节点">
<input type="button" onclick="inerrTest();" value="取得内容">
<input type="button" onclick="attrTest();" value="取得属性">
<input type="button" onclick="attrModify();" value="修改属性">
</from>
</body>
</html>
阅读全文
0 0
- javaScript_BOM_增加删除节点
- js----增加删除节点
- js增加删除节点
- DOM 增加节点 删除节点 修改节点
- Ajax -----javaScript增加,删除节点
- hadoop动态增加删除节点
- hadoop集群增加删除节点
- js标签增加/删除节点
- hadoop增加和删除节点
- jquery select 删除 增加节点
- Redis增加或删除节点
- JavaScript动态增加节点和删除节点
- TinyXml 查询指定节点、删除指定节点和增加节点
- TinyXml 查询指定节点、删除指定节点和增加节点
- JS对DOM节点的操作--增加节点,删除节点
- DOM操作---增加节点、增加节点文字、指定位置增加子节点、节点复制、删除一个子节点例子
- DEVEXPRESS-----TREELIST 的 增加、删除节点
- TreeList 的 增加、删除节点-----DevExpress
- postgresql数据备份恢复
- 混淆策略
- Trafodion CQD-allow_nullable_unique_key_constraint
- mybatis
- hdu1907John(NIM博弈变形)
- javaScript_BOM_增加删除节点
- cvFindContours
- MySql数据库sql优化
- 在vue项目中正确的引入jquery
- CF422 div2 B. Crossword solving
- sql for xml path用法
- cocos2dx-lua笔记
- Ubuntu 文件夹右小角有锁的问题解决
- 文件格式之gif