insertAdjacentHTML方法詳解


添加HTML內容與文本內容以前用的是innerHTML與innerText方法,

最近發現還有insertAdjacentHTML和 insertAdjacentText方法,

這兩個方法更靈活,可以在指定的地方插入html內容和文本內容。

 

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

方法名稱:insertHtml(where,el,html)

參數介紹:
where:插入位置。包括beforeBegin,beforeEnd,afterBegin,afterEnd。
el:用於參照插入位置的html元素對象
html:要插入的html代碼



insertAdjacentHTML 方法:在指定的地方插入html標簽語句

原型:insertAdajcentHTML(swhere,stext)


參數:

swhere: 指定插入html標簽語句的地方,

stext:要插入的內容


有四種值可用:

1.     beforeBegin: 插入到標簽開始前

2.     afterBegin:插入到標簽開始標記之后

3.     beforeEnd:插入到標簽結束標記前

4.     afterEnd:插入到標簽結束標記后

例如:

<html>  
         <head>  
         <mce:script language="<a href="http://lib.csdn.net/base/18" class='replace_word' title="JavaScript知識庫" target='_blank' style='color:#df3434; font-weight:bold;'>JavaScript</a>">

<!--  
         function myfun(){  
             var obj = document.getElementById("btn1");  
             obj.insertAdjacentHTML("afterEnd","<br><input name="txt1">");  
         } 
-->
         </mce:script>  
         </head>  
         <body>  
                <input name="txt">  
                <input id="btn1" name="btn1" type="button" value="更多" onclick="myfun()">  
         </body>  
</html>

 

<html>  
 <head>  
 <title>html insertAdjacentHTML插入新內容</title>  
 <mce:script language="jscript">
 <!--  
 function addsome()  
 {  
     document.all.paral.insertAdjacentHTML("afterBegin","<h1> 在文本前容器內插入內容1</h1>");  
     document.all.paral.insertAdjacentHTML("beforeEnd","<h2> 在文本后容器內插入內容2</h2>");  
     document.all.paral.insertAdjacentHTML("beforeBegin","<h4> 在文本前容器外插入內容4</h1>");  
     document.all.paral.insertAdjacentHTML("afterEnd","<h5> 在文本后容器外插入內容5</h2>");  
 }     
--></mce:script>  
 </head>  
 <body onload="addsome()">  
 <div id="paral" style="fontsize:6;color='#ff00ff'" mce_style="fontsize:6;color='#ff00ff'">原來的內容</div><hr>  
 </body>  
 </html>

<mce:script language="jscript"></mce:script>標簽

Tiny MCE生成的
目的是防止javascript嵌入攻擊。

這個標簽可以用js的標簽代替。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM