首頁 > 開發者 > JavaScript
如何在指定的地方插入html內容和常值內容
本文為大家介紹個小技巧可以在指定的地方插入html內容和常值內容，樣本如下，感興趣的朋友可以參考下
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就知道效果了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
