javascript中獲取元素標簽中間的內(nèi)容的實現(xiàn)方法

更新時間：2016年10月08日 17:55:28 投稿：jingxian

下面小編就為大家?guī)硪黄猨avascript中獲取元素標簽中間的內(nèi)容的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

使用ajax，通過會把服務器端響應獲取到reponseText或者reponseXML中的信息，以某種方法動態(tài)的寫到div和span標記中，這樣，可以在無刷新的情況下，改變頁面內(nèi)容的顯示。

通過javascript進行動態(tài)的修改，修改的方法有兩種：

1. 一種是使用html的每個標記的innerHTML屬性，使用此屬性，只要為它提供一個有意義的html代碼片段，那么html解釋器就可以將其中的內(nèi)容進行解釋，并顯示在頁面上，使用這種方式比較簡單，每次修改前不需要先把原來的內(nèi)容清除掉，而可以直接進行填充，填充的同時會把原來的內(nèi)容覆蓋掉。這種方式雖然簡單，但是目前還不是w3c的標準，不過主流的瀏覽器如IE,firefox都已經(jīng)采用。

2. 另外一種是創(chuàng)建一個Text Node節(jié)點作為div和span元素的子節(jié)點，采用這種方式，div和span中要顯示的內(nèi)容保存在Text Node中，這樣div和span元素顯示的內(nèi)容是由Text Node提供的。需要注意的是：在每次填寫內(nèi)容時，需要先把原來的Text Node刪除掉，然后新建一個Text Node再寫入內(nèi)容。如果不刪除的話，那么每次調(diào)用填充操作時，都會新建一個新的Text Node，也就造成div和span元素下有多個Text Node節(jié)點，并且每個Text Node都會把自身的內(nèi)容顯示出來，因此不會覆蓋原來的內(nèi)容。

<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 = "我由常軍魁變?yōu)榱藄pan";
}
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節(jié)點
    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節(jié)點
 
    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>

以上就是小編為大家?guī)淼膉avascript中獲取元素標簽中間的內(nèi)容的實現(xiàn)方法全部內(nèi)容了，希望大家多多支持腳本之家~

您可能感興趣的文章:

BootStrap Progressbar 實現(xiàn)大文件上傳的進度條的實例代碼
這篇文章主要介紹了BootStrap Progressbar 實現(xiàn)大文件上傳的進度條的實例代碼的相關資料，非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
JS實現(xiàn)瀏覽器菜單命令
JS實現(xiàn)瀏覽器菜單命令...
2006-09-09
JavaScript高級程序設計閱讀筆記（十五）瀏覽器中的JavaScript
Window對象對操作瀏覽器窗口非常有用，開發(fā)者可以移動或調(diào)整瀏覽器窗口的大小
2012-08-08
js+css在交互上的應用
關于css應用。以前一直認為css就是做布局樣式，只能表現(xiàn)頁面，跟交互是沒關系的。事實上也基本不會往那邊想。
2010-07-07
JavaScript 中文轉拼音實現(xiàn)代碼有些bug
在做項目時候遇到一個小小的顯示客戶部門名稱（拼音）的業(yè)務，就是在部門名稱下有相應的拼音，而在現(xiàn)有的數(shù)據(jù)庫中沒有相應字段，并且部門數(shù)量比較多，添加起來比較費時，就想能否在js中實現(xiàn)，在頁面中處理。
2010-03-03
微信小程序提交form操作示例
這篇文章主要介紹了微信小程序提交form操作,結合實例形式分析了微信小程序開發(fā)中使用form組件實現(xiàn)數(shù)據(jù)提交與數(shù)據(jù)處理相關操作技巧,需要的朋友可以參考下
2018-12-12
JS如何輸出26個英文字符
這篇文章主要介紹了JS如何輸出26個英文字符問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
js實現(xiàn)彈幕墻效果
這篇文章主要為大家詳細介紹了js實現(xiàn)彈幕墻效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
簡單了解JavaScript sort方法
這篇文章主要介紹了簡單了解JavaScript sort方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-11-11
JS新包管理工具yarn和npm的對比與使用入門
在2016年10月11日facebook 公開了新的javascript包管理工具 yarn, 用來替代目前被廣泛使用的npm(nodejs 自帶的包管理工具)，本文將介紹yarn工具帶來的優(yōu)點和使用入門，以及對比npm解決了什么問題，帶來哪些便利。有需要的朋友們下面來一起看看吧。
2016-12-12