我们应该感谢相遇,无论结局是喜是悲....
DOM & JS DIV层操作_创造,指定删除,全部删除
  • 首页 > IT技术
  • 作者:起点终站
  • 2016年8月2日 17:06 星期二
  • 浏览:4183
  • 字号:
  • 评论:1
  • DOM & JS DIV层操作_创造,指定删除,全部删除


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
    <html>
      
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title <script src="temp.js" type="text/javascript" $amp;>amp;$lt;/script></head>
      
      <body>
        <div>
          <span>
            <input type="text" id="text" name="mytest" /></span>
          <span>
            <input type="submit" value="add" id="submit" onclick="addDIV(document.getElementById('text').value);" /></span>
          <span>
            <input type="submit" value="delete" id="submit" onclick="deleteDIV(document.getElementById('text').value);" /></span>
          <span>
            <input type="submit" value="delete" id="submit2" onclick="deleteAllDIV();" /></span>
          <div>male
            <input type="radio" name="nametest" value="good" checked="checked" />female
            <input type="radio" name="nametest" value="bad" /></div>
          <div>temp1
            <input type="checkbox" name="nametest2" value="temp1" checked="checked" />temp2
            <input type="checkbox" name="nametest2" value="temp2" /></div>
          <div id="add"></div>
      </body>
    
    </html> 
    <script>function addDIV(addText) {
        /*创建新层*/
        var div_view = document.createElement("div");
        var text = document.getElementById("add");
        div_view.id = addText;
        div_view.innerText = addText;
        text.appendChild(div_view);
      }
      function deleteDIV(id) {
        /*删除一个层*/
        var temp = document.getElementById(id);
        temp.parentNode.removeChild(temp);
      }
      function deleteAllDIV() {
        /*删除所有附加层*/
        var parent = document.getElementById("add"); //这里因为childNodes节点会动态变下标,所以用0的index实现全部删除  
       for (var i = 0, length= parent.childNodes.length; i< length; i++){ parent.removeChild(parent.childNodes[0]); }; 
    }</script>
    
      您阅读这篇文章共花了:  
    本文作者:起点终站      文章标题: DOM & JS DIV层操作_创造,指定删除,全部删除
    本文地址:https://blog.hellozwh.com/?post=158
    版权声明:若无注明,本文皆为“起点终站”原创,转载请保留文章出处。
    宅男福利2016-08-03 19:35
    这个好玩,有意思
    返回顶部| 首页| 手气不错| 网站地图| sitemap| 装逼生成器| 站长介绍|

    Copyright © 2014-2017 起点终站   闽ICP备16011094号-1

    00:00 / 00:00
    顺序播放