使用ajax,通過會把服務器端響應獲取到reponseText或者reponseXML中的信息,以某種方法動態的寫到div和span標記中,這樣,可以在無刷新的情況下,改變頁面內容的顯示。
通過javascript進行動態的修改,修改的方法有兩種:
1. 一種是使用html的每個標記的innerHTML屬性,使用此屬性,只要為它提供一個有意義的html代碼片段,那麼html解釋器就可以將其中的內容進行解釋,並顯示在頁面上,使用這種方式比較簡單,每次修改前不需要先把原來的內容清除掉,而可以直接進行填充,填充的同時會把原來的內容覆蓋掉。這種方式雖然簡單,但是目前還不是w3c的標准,不過主流的浏覽器如IE,firefox都已經采用。
2. 另外一種是創建一個Text Node節點作為div和span元素的子節點,采用這種方式,div和span中要顯示的內容保存在Text Node中,這樣div和span元素顯示的內容是由Text Node提供的。需要注意的是:在每次填寫內容時,需要先把原來的Text Node刪除掉,然後新建一個Text Node再寫入內容。如果不刪除的話,那麼每次調用填充操作時,都會新建一個新的Text Node,也就造成div和span元素下有多個Text Node節點,並且每個Text Node都會把自身的內容顯示出來,因此不會覆蓋原來的內容。
<html> <head> <style> .css1{background-color:ff0000;color:ff9966;border:1;cursor:hand;} .css2{background-color:00ff00;color:ffffff;border:1;cursor:hand;} </style> <script type="text/javascript"> function changeneirong() { var spanv = document.getElementsByTagName("span"); spanv[2].innerHTML = "我由常軍魁變為了span"; } function changediv() { document.getElementsByTagName("div")[0].innerHTML = "我由常軍魁變成了div"; } function changep() { document.getElementsByTagName("p")[0].innerHTML = "我由常軍魁變成了p標簽"; } function change() { var spanvar = document.getElementsByTagName("span"); alert(spanvar[0].innerHTML); document.getElementsByTagName("span")[0].className = "css2"; } function fillDivWithInnerHTML() { var username = document.getElementById("username").value; var textDiv = document.getElementById("textDiv"); textDiv.innerHTML=username; } function fillDivWithTextNode() { var textDiv = document.getElementById("textDiv"); //首先刪除所有已新建的Text Node節點 while(textDiv.hasChildNodes()) { textDiv.removeChild(textDiv.childNodes[0]); } var textNode = document.createTextNode(document.getElementById("username").value); textDiv.appendChild(textNode); } function fillSpanWithInnerHTML() { var username = document.getElementById("username").value; var textSpan = document.getElementById("textSpan"); textSpan.innerHTML=username; } function fillSpanWithTextNode() { var textSpan = document.getElementById("textSpan"); //首先刪除所有已新建的Text Node節點 while(textSpan.hasChildNodes()) { textSpan.removeChild(textSpan.childNodes[0]); } var textNode = document.createTextNode(document.getElementById("username").value); textSpan.appendChild(textNode); } </script> </head> <body> <span class="css1" onclick="change()">常軍魁</span> <span class="css1" onclick="javascript:this.className='css2'">這是一段文字 </span> <br /> <span onclick="changeneirong()" style="corsur:hand;">常軍魁</span> <br /> <div onclick="changediv()">常軍魁</div> <p onclick="changep()">常軍魁</p> <input type="text" id="username" name="username"/><br/> <input type="button" id="fillDivWithInnerHTML" value="fillDivWithInnerHTML" onclick="fillDivWithInnerHTML()"/> <br/> <input type="button" id="fillDivWithTextNode" value="fillDivWithTextNode" onclick="fillDivWithTextNode()"/> <br/> <input type="button" id="fillSpanWithInnerHTML" value="fillSpanWithInnerHTML" onclick="fillSpanWithInnerHTML()"/> <br/> <input type="button" id="fillSpanWithTextNode" value="fillSpanWithTextNode" onclick="fillSpanWithTextNode()"/> <span id="textSpan"></span><br/> <div id="textDiv"></div> </body> </html>
以上就是小編為大家帶來的javascript中獲取元素標簽中間的內容的實現方法全部內容了,希望大家多多支持~