javascript - jQuery : append or replace automatic?

################## SIMPLIFIED VERSION  ##################

我需要什么:

$('body').appendOrReplace('<div id="foo"></div>')

第一次的结果是:

<body><div id="foo"></div></body>

现在，如果我重新运行相同的代码，结果应该不会改变!

如果 DOM 中有任何要 append 的子元素，如 $('body').appendOrReplace('<div id="foo"><p id="bar"></p></div>') ，appendOrReplace 必须只获取第一个元素的 id。

问题是:参数是一个字符串(不是 dom)，所以我无法轻松获取 id，以测试是否已经存在。

################## MY USE CASE (EDIT)  ##################

我使用模板 JST(带有 Rails)，所以我有以下代码:

$('#page').append(app.JST('path/to/template'));

JST 模板可以返回整页 html( future HTML 的一个很长的字符串)。

我需要确保模板的唯一性。每个模板都以具有唯一 ID 的元素开头。

所以我需要一个 jquery 方法来 append 这个完整的 DOM，当且仅当元素不存在时，或者如果已经存在则替换。

最佳答案

你只需要这样:

if ($("#foo").length == 1)
  // Replace
else
  // Append

您可以创建这样的函数:

$.fn.appendOrReplace = function (param) {
  // do that
}

接下来你可以做的是:

var contentFoo = '<div id="foo"></div>';

if ($("#foo").length == 1)
  $('body').replaceWith(contentFoo);
else
  $('body').append(contentFoo);

关于javascript - jQuery : append or replace automatic?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32784870/