动态添加/删除HTML元素

在这里插入图片描述
<HTML>
<HEAD>
<title>动态添加/删除HTML元素</title>
<style type="text/css">

  .span_enable{
    padding: 5px 3px 5px 3px;
    background-image: #E9E9E9;
  }
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script   language="javascript">   
    var count= 0 ;   
    var maxfile = 5;
    //propertychange监听input里面的字符变化,属性改变事件
                $('.aa').bind('input propertychange', function() {
                    var $this = $(this);
                    console.log($this);
                    var text_length = $this.val().length;//获取当前文本框的长度
                    var current_width = parseInt(text_length) *16;//该16是改变前的宽度除以当前字符串的长度,算出每个字符的长度
                    console.log(current_width)
                    $this.css("width",current_width+"px");
                });
     // 增加元素
    function addUpload() {   //限制最多maxfile个文件框

       var newDiv =  "<div id=divUpload" + count +">"
                      + " <input class='aa' id=tips" + count + "   value class='input' type=text  name=tip[" + count + "]>"
                      + " <a href=javascript:delUpload('divUpload" + count + "');>删除</a>"
                  + " </div>";   
        
        var addbutton=document.getElementById("addbutton")

        if(count == maxfile){ 
          addbutton.style.display="none";
          console.log(addbutton)
          return document.getElementById("uploadContent").insertAdjacentHTML("beforeEnd", newDiv);
        }  
       
        count++; 
        //自增id不同的HTML对象，并附加到容器最后
        document.getElementById("uploadContent").insertAdjacentHTML("beforeEnd", newDiv);     
    }   
    //删除指定元素
    function delUpload(diva) {
       var addbutton=document.getElementById("addbutton")  
        count--; 
        if(count<=maxfile){
           addbutton.style.display="block";
        }
        document.getElementById(diva).parentNode.removeChild(document.getElementById(diva));   
    }   
    function fabu_form(from){
      var tips=from.tip.value;
      console.log(tips);

    }
   
  </script>
</HEAD>
<body   MS_POSITIONING="GridLayout">
<form   id="Form1"  method="post" action="action/upload.php">
  <div>
    <table>
      <tr>
        <td   id="tdRrmove"   width="2000">
        <!--承接整个file文件框的HTML容器-->
        <div id="uploadContent">
        </div>
        </td>
      </tr>
    </table>
  </div>
  <a href="javascript:addUpload()" style="display: block" id="addbutton">添加标签</a>
  <br/>
  <br/>

</body>
</HTML>
动态添加/删除HTML元素

动态添加/删除HTML元素

猜你喜欢
