如何知道動態創建的元素是否存在？

Question

我有這個簡單的功能：

var x = document.createTextNode("ERROR");
document.body.appendChild(x);

因此，我需要創建一個IF來驗證此消息是否存在[如果已創建此消息]。 這是問題，我不知道該怎么做。

GetElementByID似乎不適用於動態創建的元素。

有什么幫助嗎？ 謝謝。

Answer 1

您正在創建文本節點，而不是元素。 您需要創建一個元素並為其指定一個ID，以便能夠使用getElementById 。

我不知道有什么合理的方法來搜索文本節點，盡管您始終可以檢查附加到該元素的元素的文本節點，然后查看它是否在那里。

var message = "ERROR";
var t = document.createTextNode(message);
var node = document.getElementById('content').appendChild(t);
if (document.getElementById('content').innerHTML !== message) {

  console.log('element not added');
} else {
  console.log('element added');
}

這是一個小提琴：

http://jsfiddle.net/btipling/rBg4w/

Answer 2

您可以使用document.contains檢查元素是否在DOM中

只是一個簡單的例子

document.contains($('<div>')[0]); // FALSE

和

document.contains($('<div>').appendTo('body')[0]); // TRUE

jQuery僅用於元素創建的簡寫

這也適用於文本節點 ，您可以在任何節點上使用包含。

document.body.contains(Node); // Example

瀏覽器支持有些不錯

文檔： https : //developer.mozilla.org/en-US/docs/Web/API/Node.contains

---

問題細節：

var x = document.createTextNode("ERROR");
document.body.appendChild(x);
document.contains(x); // Should be TRUE

Answer 3

我相信這會起作用：

var x = document.createTextNode("ERROR");
var element = document.body.appendChild(x); //returns text node
if(!element){
    //element was not added
}

盡管如果我是我，我可能會創建一個具有id或名為error的類的span元素。 這樣，您可以對其應用任何CSS樣式。

Answer 4

嘗試這個：

var x = document.createTextNode("ERROR");
document.body.appendChild(x);

if (document.body.innerText.indexOf('ERROR')>=0){
    alert('"ERROR" found');
}

indexOf不適用於所有瀏覽器。

正如@slowpython所說，我寧願使用ID或NAME創建一個DOM元素。