如何检查文档是否包含元素答案

【问题标题】：How to Check if Document Contains an Element如何检查文档是否包含元素
【发布时间】：2018-04-05 18:27:18
【问题描述】：

我正在尝试检查 DOM 是否包含 ID = "htmlFileLink" 的元素。

let element = document.createElement('a');
element.id = 'htmlFileLink';
document.body.insertAdjacentHTML( 'beforeend', element );

if( document.body.contains( document.getElementById('htmlFileLink') ) ) {
	alert ('yes');
}
else {
	alert ('no');
}

为什么提示“否”而不是“是”？

【问题讨论】：

因为正文中没有元素。 insertAdjacentHTML 等待 HTML 字符串作为参数，而不是元素。使用appendChild 将新元素附加到现有元素。
好的，这就是我正在寻找的答案，appendChild()。请作为答案发布，以便我接受。

标签： javascript dom contains

【解决方案1】：

Node.appendChild() 方法将一个节点添加到指定parent 节点的children 列表的末尾。如果给定的child 是对document 中现有节点的引用，appendChild() 会将其从当前位置移动到新位置。

演示

let element = document.createElement('a');
element.id = 'htmlFileLink';
element.innerText = 'Test';
document.body.appendChild(element);

if (document.body.contains(document.getElementById('htmlFileLink'))) {
  alert('yes');
} else {
  alert('no');
}

【讨论】：

【解决方案2】：

insertAdjacentHTML的第二个参数必须是HTML。

例子

document.body.insertAdjacentHTML('beforeend', '<a id="htmlFileLink">Ele</a>');

if (document.body.contains(document.getElementById('htmlFileLink'))) {
  console.log('yes');
} else {
  console.log('no');
}

【讨论】：

【解决方案3】：

根据the specification：

insertAdjacentHTML() 将指定的文本解析为 HTML 或 XML 和将生成的节点插入到指定位置的 DOM 树中。

这意味着函数总是期望第二个参数是一个有效的 HTML 字符串，而不是一个 DOM 元素。

查看下面的 sn-p 以确保：

document.body.insertAdjacentHTML('beforeend', '<a id="htmlFileLink"></a>');

if (document.body.contains(document.getElementById('htmlFileLink'))) {
  alert ('yes');
} else {
  alert ('no');
}

【讨论】：

【解决方案4】：

而不是创建元素尽量做到下面的简单易行。

enter code here

<script>

if(document.getElementById('htmlFileLink')) {
    alert ('yes');
}
else {
    alert ('no');
}
</script>

【讨论】：