javaScript_BOM_增加删除节点

最新推荐文章于 2022-06-30 23:17:56 发布

lzl_Avery

最新推荐文章于 2022-06-30 23:17:56 发布

阅读量608

点赞数

分类专栏：基础文章标签： script

本文链接：https://blog.csdn.net/lzl_Avery/article/details/74188317

版权

基础专栏收录该内容

66 篇文章 0 订阅

订阅专栏

<!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>

<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" οnclick="createNode();" value="开始测试">
  <input type="button" οnclick="removeNode();" value="删除节点">
  <input type="button" οnclick="inerrTest();" value="取得内容">
  <input type="button" οnclick="attrTest();" value="取得属性">
  <input type="button" οnclick="attrModify();" value="修改属性">
</from>
</body>
</html>

lzl_Avery

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
javaScript_BOM_增加删除节点

documentss function createNode() {//新增节点 var img1=document.createElement("img");//动态创建图片元素 img1.src="a/img.jpg"; img1.id="img1"; var fatherNode=document.getElementById("form1"); fa
复制链接

扫一扫