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\"> <img src=\"http://www.cnblogs.com/Images/ico_del.gif\" border=\"0\" align=\"absmiddle\" onclick=\"moveFile(this.parentNode)\"> </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 --;
}
}