jQuery：自动追加或替换？答案

【问题标题】：jQuery : append or replace automatic?jQuery：自动追加或替换？
【发布时间】：2015-12-23 10:40:45
【问题描述】：

################## 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，或者如果已经存在则替换。

【问题讨论】：

【解决方案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>');

【讨论】：

【解决方案2】：

其他答案中的 sn-p 对我不起作用。

这个正在工作：

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

【讨论】：