Question

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

我需要什么：

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

第一次，结果是：

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

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

如果DOM中有任何子项要追加$('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的整页（很长的未来HTML字符串）。

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

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

Answer 1

你只需要这样：

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

您可以创建如下函数：

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

接下来你可以做的是：

if ($("#foo").length == 1)
  $('body').replace('<div id="foo"></div>');
else
  $('body').append('<div id="foo"></div>');

Answer 2

另一个答案的片段对我不起作用。

这个正在工作：

if ($("#foo").length > 0)
  $('#foo').replaceWith('<div id="foo">updated</div>');
else
  $('body').append('<div id="foo">initial</div>');