正確的方法來改變頁面上的文本和元素使用JavaScript

我一直在使用innerHTML和innerText一段時間來更改網頁上的元素和文本，我剛剛發現它們不是W3C標準。正確的方法來改變頁面上的文本和元素使用JavaScript

我現在發現innerHTML可以替換爲createElement，setAttribute和其他幾個，但什麼是改變文本內的元素的最佳方法？

我發現了textContent，但是有沒有一種標準的方法，它是否在較老的瀏覽器中實現？

2010-09-03 Ryan

http://www.developer-x.com/content/innerhtml – 2010-09-03 23:26:49

沒有JavaScript兼容的聯盟。瀏覽器對JavaScript的處理方式不同 - 這也是爲什麼JavaScript有更多錯誤的原因。當您進行W3C HTML/CSS驗證時，不包括JavaScript是有原因的。 – vol7ron 2010-09-03 23:37:15

@ vol7ron：沒有「財團」，但ECMAScript是一個被廣泛接受的標準。 JavaScript是ECMAScript的一個實現。然而，我們通過JavaScript與網頁和瀏覽器進行交互的方式是文檔對象模型，該模型*由W3C標準化 - http://www.w3.org/DOM/。 – 2010-09-04 00:18:29

textContent未在IE8及更低版本中實現。您可以使用createTextNode()類似於您將如何使用createElement（）。不過，我經常使用發現技術找出我需要使用，並保持對它的引用哪個屬性：

// You can use a shorter variable name if you want 
var innerTextOrTextContent = "textContent" in document.body 
           ? "textContent" : "innerText"; 

// Set an element's text: 
myElement[innerTextOrTextContent] = "Added using: "+innerTextOrTextContent;

的一個createTextNode（）例如：

var tNode = document.createTextNode("Added using createTextNode()"); 
myElement.appendChild(tNode);

的東西，我經常忘了，你也可以直接設置文本節點的值，如果你能得到它的引用：

// childNodes[0] is a text node: 
myElement.childNodes[0].nodeValue = "Added using nodeValue";

示例 - http://jsfiddle.net/BxPaG/。

來源

2010-09-03 23:27:06

不錯，我不知道'createTextNode'方法。你會說用'createElement'創建一個新的''元素並且應用屬性和內容並用'replaceChild'代替舊的''元素而不是簡單地使用'innerText'或'textContent'會很愚蠢嗎？ – Ryan 2010-09-03 23:40:23

@Ryan：是的，考慮到還有其他選擇，這沒什麼意義。您可以使用* replaceChild（）*替代* appendChild（）*來替換當前的文本節點。另外，如果您可以獲得對文本節點的引用，則可以使用* nodeValue *直接更改它的值 - 請參閱我的更新。 – 2010-09-03 23:43:03

我認爲你不能通過使用任何你的javascript庫提供的改變文本（innerHtml for jQuery）來出錯。畢竟使用這樣一個庫的一個主要原因是有一個從不同瀏覽器實現中抽象出來的平臺。

來源

2010-09-03 23:24:43

如果他不使用圖書館會怎麼樣？此外，jQuery不提供用於更改文本的「innerHtml」。應該使用* text（）*方法，* html（）*用於設置HTML。 – 2010-09-03 23:30:55

@安迪E：你是對的，他可能不會使用任何。另一方面，對於大中型項目，使用沒有任何庫的JavaScript是非常痛苦的，至少如果你希望你的網站能夠與所有主流瀏覽器一起工作的話。我不想這樣做。 – 2010-09-03 23:42:38

，我也不會 - 我過去了，但現在只使用一個庫是有道理的:-)對於小而簡單的頁面和腳本，我堅持使用vanilla JS。 – 2010-09-03 23:44:43

正確的方法來改變頁面上的文本和元素使用JavaScript

回答

相關問題