如何知道动态创建的元素是否存在?

时间:2013-09-17 17:57:51

标签: javascript html dom textnode

我有这个简单的功能:

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

那么我需要创建一个 IF 来验证此消息是否存在[如果已创建此消息]。这是问题,我不知道该怎么做。

GetElementByID 似乎无法使用动态创建的元素。

有任何帮助吗?感谢。

4 个答案:

答案 0 :(得分: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/

答案 1 :(得分:1)

您可以使用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

答案 2 :(得分:0)

我相信这会奏效:

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

虽然如果我是你,我可能会创建一个带有id或类名为error的span元素。这样您就可以应用任何CSS样式。

答案 3 :(得分:-1)

试试这个:

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

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

indexOf在所有浏览器中都不起作用。

正如@slowpython所说,我宁愿用ID或NAME创建一个DOM元素。