如何在指定的地方插入html內容和文本內容

2019-11-20 21:24:05

字體：大中小

來源：轉載

供稿：網友

dhtml提供了兩個方法來進行添加，insertAdjacentHTML和insertAdjacentText
insertAdjacentHTML方法：在指定的地方插入html標簽語句。
原型：insertAdjacentHTML(swhere,stext)
參數：
swhere:指定插入html標簽語句的地方，有四種值可以用：
1.beforeBegin:插入到標簽開始前
2.afterBegin:插入到標簽開始標記后
3.beforeEnd:插入到標簽結束標記前
4.afterEnd:插入到標簽結束標記后
stext:要插入的內容
例：

復制代碼代碼如下:

 
var sHTML="<input type=button go2()" + " value='Click Me'><BR>" 
var sScript='<SCRIPT DEFER>' 
sScript = sScript + 'function go2(){ alert("Hello from inserted script.") }' 
sScript = sScript + '</script' + '>'; 
ScriptDiv.insertAdjacentHTML("afterBegin",sHTML + sScript); 

在html正文中加入一行：
<DIV ID="ScriptDiv"></Div>
最終變成：

復制代碼代碼如下:

 
<DIV ID="ScriptDiv"> 
<input type=button onclick=go2() value='Click Me'><BR> 
<SCRIPT DEFER> 
function go2(){alert("Hello from inserted sctipt.")}' 
</script> 
</DIV> 

insertAdjacentText方法與insertAdjacentHTML方法類似，只不過只能插入純文本，參數相同

這兩個屬性還是比較適用的，尤其是在繪圖等地方用的比較多，它的優點是不會覆蓋原有的內容，讓我們來假設一下吧，有一個DIV，它里面已經有內容了，現在我們還要動態的添加內容進去，而又不能覆蓋原有的內容，那么這時候這個東西就很重要了，innerHTML是會把原有的東西覆蓋掉的。
所有成對出現的HTML都可以用這個屬性，這點和innerHTML一樣，比如<body>..</body>、<div>....</div>等這些都有這兩個屬性

補充下：剛才我試了下，innerHTML這個屬性是可讀寫的，以前我知道innerHTML可以對節點插入內容，但是這個屬性也是可讀的，也就是說innerHTML中保存的是節點的html內容；看下以下代碼就完全明白了：

復制代碼代碼如下:

 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>無標題文檔</title> 
</head> 
<body> 
safdsdaf按時地方 
<script language="javascript"> 
alert(document.body.innerText) 
</script> 
</body> 
</html> 

上面是我轉帖到別人的代碼，下面我再補充幾行代碼，也很經典有，也許你用的著：

復制代碼代碼如下:

 
<script language="javascript" type="text/javascript"> 
function addFile() 
{ 
var filebutton = '<br><input type="file" size="50" name="File" />'; 
document.getElementByIdx('FileList').insertAdjacentHTML("beforeEnd",filebutton); 
} 
</script> 

上面的是Head里面的腳本，下面是body里面的：html代碼：

復制代碼代碼如下:

 
<p id="FileList"> 
<input type="file" runat="server" size="50" name="File"/> 
</p> 

你把代碼拷貝到文件中保存成一個html就知道效果了。

上一篇：取消選中單選框radio的三種方式示例介紹

下一篇：js 阻止子元素響應父元素的onmouseout事件具體實現

學習交流

索泰發布一款GTX 1070 Mini迷你版本:小機

索泰發布一款GTX 1070 Mini迷你版本:小機箱大愛...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注