使用js動態的修改div和span標記中的文本內容

本文轉載自查看原文 2014-04-20 22:53 8883

2008-08-28 22:04

使用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都會把自身的內容顯示出來，因此不會覆蓋原來的內容。

3. 通過不刪除已有的Text Node，每次填充時創建一個新的Text Node，可以進行多次append操作，那么對於每次操作不需要覆蓋原有的情況，可以使用這種方式來實現。

實例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無標題文檔</title>

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>

<br/>

<br/>

<br/>

</body>

</html>

免責聲明！

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

猜您在找 HTML中的span標記和div標記使用JS動態向div中append內容 js修改div標簽中的內容 JS把內容動態插入到DIV JS把內容動態插入到DIV 名字中的內容:名字"> js怎么獲取名字中的內容:名字 HTML中的div和span 原生js修改文本內容 js 選中div中的文本 HTML----常用標記(head標記、表格標記、列表標記、div+span)