我想在jQuery中实现可重用的UI元素，并在HTML元素后添加按钮。
有两种使用该元素的方案：在HTML中静态声明和在JS中动态创建。我在实现第二个用例时遇到问题。
静态用例：
<span class=".ui-element'>Content</span>
我在jQuery中拾取元素并将按钮放在跨度之后：
the_span.after(the_button);
到目前为止，这个工作正常。
在动态创建的跨度上使用相同的技术时，会出现问题：
var the_span = $("<span>").text("Content").after(the_button);
return the_span; // caller is responsible for adding it the DOM
这是行不通的：此后DOM中没有按钮。我猜这是因为该范围还没有父级，而静态声明的范围却有一个父级？
这可以通过解决
在动态创建的范围周围引入包装元素：
var wrapper = element.wrap($('span')).parent(); wrapper.append(the_span, the_button);
现在，我的函数必须返回包装而不是范围，以便调用者可以将其添加到DOM中。这是意外行为，并且会中断链接。我也不想在静态用例中要求包装器，因为在那里不需要。
the_span.append(the_button);
我无法使用此解决方案，因为之后我希望能够在原始范围上使用.text（）和.html（），这将删除该按钮。
要求先将跨度添加到DOM，然后再添加我的按钮。这行得通，但我更喜欢不需要此功能的解决方案。
我该如何解决？
您应使用.add代替.after，如下所示：
var the_span = $("<span>").text("Content").add(the_button);
return the_span; // caller is responsible for adding it the DOM
使用.add将将元素添加到jQuery选择中。
在工作中查看：https：//jsfiddle.net/nbm83e85/
更新：
您应该注意，更改the_span实例的文本如下：
the_button.text("Changed Button Name");
the_span.text("New Span Content");
将更改the_spanjQuery集合中所有选定元素的文本，即跨度和按钮，因此按钮的文本将更改为与跨度相同的值。要解决此问题，您应该通过以下方式使用它：
the_button.text("Changed Button Name");
$(the_span[0]).text("New Span Content");
祝你好运。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句