DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 如何在指定的地方插入html內容和文本內容
如何在指定的地方插入html內容和文本內容
編輯:JavaScript綜合知識     

 本文為大家介紹個小技巧可以在指定的地方插入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就知道效果了。   
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved