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

How to know if an element, created dynamically, exist?

本文关键字：元素 是否 存在 创建 何知道 动态      更新时间：2023-09-26

我有这个简单的函数：

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

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

GetElementByID似乎不适用于动态创建的元素。

有什么帮助吗？谢谢。

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

您正在创建文本节点，而不是元素。您需要创建一个元素并为其提供一个 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/

我相信这会起作用：

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

尽管如果我是你，我可能会创建一个带有 id 或名为 error 的类的 span 元素。这样，您可以对其应用任何css样式。

试试这个：

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

indexOf 并非在所有浏览器中都有效。

正如@slowpython所说，我宁愿创建一个带有ID或NAME的DOM元素。

相关文章：