jQuery追加元素，如果它不存在，否则替换

这是一段很短的代码：

var $el = $("#something").find(".test"); if (!$el.length) { $("#something").append('
somecontent
'); } else { $el.replaceWith('
somenewcontent
'); } 

我找不到方法appendOrReplaceWith或类似的东西。

任何想法我怎样才能缩短它？

我相信：

 $("#something").appendOrReplace('
sometext
'); 

会更容易阅读，但还没有这样的方法。

Answer 1

强制性的香草回答。 它可能不会更短，但速度更快。

获取元素，使用“test”类获取所有子元素，创建div，检查子元素长度，如果length是真实的，则将innerHTML设置为div。 否则，追加它。

 var el = document.getElementById("something"); var subel = el.getElementsByClassName("test"); var div = document.createElement("div"); div.className = "test" if (subel.length) { div.textContent = "somenewcontent"; while(el.hasChildNodes()) el.removeChild(el.lastChild); //remove child nodes el.appendChild(div); } else { div.textContent = "somecontent"; el.appendChild(div); } 

Answer 2

首先，你应该缓存你的选择器：

 var $som = $('#something'); var $ele = $(".test",$som); var newHtml = '
somecontent
'; if (!$el[0]) $som.append( newHtml ); else $ele.replaceWith( newHtml ); 

但你已经做得很好了，（除了没有缓存重复的选择器），而我，试图让它变小可能是一个** – 因为没有使用{}为我的if和else 🙂

Answer 3

我会这样做的

 var $s = $("#something"), $t = $s.find(".test"), c = 'New content'; ( $t[0] ? $t:$s)[( $t[0] ? 'html':'append')](( $t[0] ? c :$('
',{class:'test'}).append(c))); 

Answer 4

将一个像findOrAppend这样的方法添加到jQuery可能很有用：

 $.fn.findOrAppend = function(selector, content) { var elements = this.find(selector); return elements.length ? elements : $(content).appendTo(this); } 

然后你可以根据需要链接text ， replaceWith ， empty等：

 $("#something") .findOrAppend(".test", "
") .text("newcontent");