javaScript_BOM_增加删除节点

柔情只为你懂 2022-06-13 08:46 143阅读 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>