如何在指定的地方插入html內(nèi)容和文本內(nèi)容
更新時(shí)間:2013年12月23日 17:42:27 作者:
本文為大家介紹個(gè)小技巧可以在指定的地方插入html內(nèi)容和文本內(nèi)容,示例如下,感興趣的朋友可以參考下
dhtml提供了兩個(gè)方法來進(jìn)行添加,insertAdjacentHTML和insertAdjacentText
insertAdjacentHTML方法:在指定的地方插入html標(biāo)簽語句。
原型:insertAdjacentHTML(swhere,stext)
參數(shù):
swhere:指定插入html標(biāo)簽語句的地方,有四種值可以用:
1.beforeBegin:插入到標(biāo)簽開始前
2.afterBegin:插入到標(biāo)簽開始標(biāo)記后
3.beforeEnd:插入到標(biāo)簽結(jié)束標(biāo)記前
4.afterEnd:插入到標(biāo)簽結(jié)束標(biāo)記后
stext:要插入的內(nèi)容
例:
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方法類似,只不過只能插入純文本,參數(shù)相同
這兩個(gè)屬性還是比較適用的,尤其是在繪圖等地方用的比較多,它的優(yōu)點(diǎn)是不會(huì)覆蓋原有的內(nèi)容,讓我們來假設(shè)一下吧,有一個(gè)DIV,它里面已經(jīng)有內(nèi)容了,現(xiàn)在我們還要?jiǎng)討B(tài)的添加內(nèi)容進(jìn)去,而又不能覆蓋原有的內(nèi)容,那么這時(shí)候這個(gè)東西就很重要了,innerHTML是會(huì)把原有的東西覆蓋掉的。
所有成對(duì)出現(xiàn)的HTML都可以用這個(gè)屬性,這點(diǎn)和innerHTML一樣,比如<body>..</body>、<div>....</div>等這些都有這兩個(gè)屬性
補(bǔ)充下:剛才我試了下,innerHTML這個(gè)屬性是可讀寫的,以前我知道innerHTML可以對(duì)節(jié)點(diǎn)插入內(nèi)容,但是這個(gè)屬性也是可讀的,也就是說innerHTML中保存的是節(jié)點(diǎn)的html內(nèi)容;看下以下代碼就完全明白了:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標(biāo)題文檔</title>
</head>
<body>
safdsdaf按時(shí)地方
<script language="javascript">
alert(document.body.innerText)
</script>
</body>
</html>
上面是我轉(zhuǎn)帖到別人的代碼,下面我再補(bǔ)充幾行代碼,也很經(jīng)典有,也許你用的著:
<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>
你把代碼拷貝到文件中保存成一個(gè)html就知道效果了。
insertAdjacentHTML方法:在指定的地方插入html標(biāo)簽語句。
原型:insertAdjacentHTML(swhere,stext)
參數(shù):
swhere:指定插入html標(biāo)簽語句的地方,有四種值可以用:
1.beforeBegin:插入到標(biāo)簽開始前
2.afterBegin:插入到標(biāo)簽開始標(biāo)記后
3.beforeEnd:插入到標(biāo)簽結(jié)束標(biāo)記前
4.afterEnd:插入到標(biāo)簽結(jié)束標(biāo)記后
stext:要插入的內(nèi)容
例:
復(fù)制代碼 代碼如下:
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>
最終變成:
復(fù)制代碼 代碼如下:
<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方法類似,只不過只能插入純文本,參數(shù)相同
這兩個(gè)屬性還是比較適用的,尤其是在繪圖等地方用的比較多,它的優(yōu)點(diǎn)是不會(huì)覆蓋原有的內(nèi)容,讓我們來假設(shè)一下吧,有一個(gè)DIV,它里面已經(jīng)有內(nèi)容了,現(xiàn)在我們還要?jiǎng)討B(tài)的添加內(nèi)容進(jìn)去,而又不能覆蓋原有的內(nèi)容,那么這時(shí)候這個(gè)東西就很重要了,innerHTML是會(huì)把原有的東西覆蓋掉的。
所有成對(duì)出現(xiàn)的HTML都可以用這個(gè)屬性,這點(diǎn)和innerHTML一樣,比如<body>..</body>、<div>....</div>等這些都有這兩個(gè)屬性
補(bǔ)充下:剛才我試了下,innerHTML這個(gè)屬性是可讀寫的,以前我知道innerHTML可以對(duì)節(jié)點(diǎn)插入內(nèi)容,但是這個(gè)屬性也是可讀的,也就是說innerHTML中保存的是節(jié)點(diǎn)的html內(nèi)容;看下以下代碼就完全明白了:
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標(biāo)題文檔</title>
</head>
<body>
safdsdaf按時(shí)地方
<script language="javascript">
alert(document.body.innerText)
</script>
</body>
</html>
上面是我轉(zhuǎn)帖到別人的代碼,下面我再補(bǔ)充幾行代碼,也很經(jīng)典有,也許你用的著:
復(fù)制代碼 代碼如下:
<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代碼:
復(fù)制代碼 代碼如下:
<p id="FileList">
<input type="file" runat="server" size="50" name="File"/>
</p>
你把代碼拷貝到文件中保存成一個(gè)html就知道效果了。
相關(guān)文章
基于JavaScript實(shí)現(xiàn)鼠標(biāo)箭頭移動(dòng)圖片跟著移動(dòng)
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)鼠標(biāo)箭頭移動(dòng)圖片跟著移動(dòng)的核心代碼,代碼比較簡單易懂,需要的朋友可以參考下2016-08-08動(dòng)態(tài)規(guī)劃之使用備忘錄來改進(jìn)Javascript函數(shù)
這篇文章主要介紹了動(dòng)態(tài)規(guī)劃之使用備忘錄來改進(jìn)Javascript函數(shù),動(dòng)態(tài)規(guī)劃它既是一種數(shù)學(xué)優(yōu)化方法,也是一種計(jì)算機(jī)編程方法,下文相關(guān)資料介紹需要的小伙伴可以參考一下2022-04-04原生js實(shí)現(xiàn)查找/添加/刪除/指定元素的class
查找、添加、刪除、指定元素的class使用原生js實(shí)現(xiàn)不可思議吧,感興趣的朋友可以參考下哈,希望可以幫助到你2013-04-04微信小程序上傳帖子的實(shí)例代碼(含有文字圖片的微信驗(yàn)證)
這篇文章主要介紹了小程序上傳帖子(含有文字圖片的微信驗(yàn)證)的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07JavaScript塊級(jí)作用域綁定的實(shí)現(xiàn)流程
這篇文章主要給大家介紹了關(guān)于JavaScript塊級(jí)作用域綁定的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-12-12驗(yàn)證控件與Button的OnClientClick事件詳細(xì)解析
以下就是被我已知忽略的問題和解決方案,當(dāng)我發(fā)覺這個(gè)問題的時(shí)候,冒出了一身冷汗,幸虧做了嚴(yán)格的服務(wù)器端驗(yàn)證,不然可就慘了2013-12-12