jquery - 如果另一个元素不存在，是否有一种优雅的方法在 JQuery 中选择一个元素？

Question

假设我有以下需求:如果id为"x"的元素存在，则将元素e添加到元素中，否则添加e 到正文。

在 DOM level 0 中，我可以这样写:

var parent = document.getElementById("x") || document.body;
parent.appendChild(e);

在 jQuery 中，以下内容不起作用:

var parent = $("#x") || $("body");
parent.append(e);

因为如果不存在 id x 的元素，第一个析取函数将返回空的 jquery 对象，其中 with 是 true，而不是 false，因此 append 不执行任何操作。不过，我可以写:

var parent = $("#x")[0] || $("body")[0];
parent.appendChild(e);

但是这个解决方案有点笨拙，因为索引 jQuery 对象会让我回到 HTMLElements，所以我必须使用 appendChild 而不是 append。虽然这有效，但我想知道这种级别的混合是否合适或表明设计不好。

可能有办法使用first()吗？也许我可以创建一个 jQuery 对象，它本质上是一个数组，其第一个元素是 id x 的 div，第二个元素是主体。我知道我可以使用采用元素数组的 jQuery 构造函数形式来完成此操作，但随后我又回到了混合级别。我也知道如何检查 id x ($("#x").length) 的元素是否存在，但我看不出这将如何导致一种优雅的方式来表达“the id 为 x 的元素(如果存在)，否则为正文。”

这样的表述存在吗？

Answer 1

老实说，我真的不认为这非常冗长:

var parent = $('#x');
if(parent.length == 0) parent = $('body');

其意图也十分明确。如果这种习惯用法经常出现，您甚至可以将其包装在一个函数中。

此外，这是一个三元形式，仅触发每个查询一次(尽管这是可读性的权衡):

var parent = (x = $('#header')).length ? x : $('body');