insertAdjacentHTML动态插入HTML代码

添加HTML 内容与文本 内容以前用的是innerHTML与innerText方法，最近发现还有insertAdjacentHTML和insertAdjacentText方法，这两个方法更灵活，可以在指定的地方插入html 内容和文本 内容。 insertAdjacentHTML方法：在指定的地方插入html标签语句 原型：insertAdajcentHTML(swhere,stext) 参数： swhere: 指定插入html标签语句的地方，有四种值可用： 1.     beforeBegin: 插入到标签开始前 2.     afterBegin:插入到标签开始标记之后 3.     beforeEnd:插入到标签结束标记前 4.     afterEnd:插入到标签结束标记后 stext：要插入的内容

例如:图片上传时

          <td style="text-align:left;">
          <div id="MyFile">
                                   <br />
                    　　　　　　 <input id="File" type="file" name="File" style="width: 425px"/>
           </div>
          </td>

 

           

              var  m =1;
                function ADHtml(){    
            return "<div style=\"\"><input type=\"file\" size=\"25\" name=\"File\" style=\"width: 425px;\" ID=\"File\">&nbsp<img src=\"http://www.cnblogs.com/Images/ico_del.gif\" border=\"0\" align=\"absmiddle\" οnclick=\"moveFile(this.parentNode)\">&nbsp;</div>";
           }

   function addFile(){           
    if(m < 5){
     var ad = document.getElementById("MyFile");
     ad.insertAdjacentHTML("beforeEnd", ADHtml());
     m ++;
    }else{
     alert("上傳附件數量請保持在5個以內");
    }
   }
      
   function moveFile(obj){
    obj.outerHTML = "";
    
    if(m > 0){
     m --;
    }
   }

 

 

 

转载于:https://www.cnblogs.com/linpengfeixgu/articles/1260873.html