我想在jQuery中实现一个可重用的UI元素，我在HTML元素后添加一个按钮。
有两种情况如何使用元素：在HTML中静态声明并在JS中动态创建。我在实现第二个用例时遇到了问题。
静态用例：
<span class=".ui-element'>Content</span>
我在jQuery中拾取元素并在span之后放置我的按钮：
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中没有按钮。我想这是因为span还没有父级，而静态声明的span有一个父级？
这可以通过
解决在动态创建的范围周围引入包装元素：
var wrapper = element.wrap($('span')).parent();
wrapper.append(the_span, the_button);
现在我的函数必须返回包装器而不是span，因此调用者可以将它添加到DOM。这是意外行为并打破了链接。我也不想在静态用例中需要包装器，因为那里不需要它。
the_span.append(the_button);
我不能使用这个解决方案，因为我希望能够在之后的原始范围上使用.text（）和.html（），这将删除按钮。
要求在添加按钮之前已将范围添加到DOM。这有效，但我更喜欢一种无需此功能的解决方案。
我该如何解决这个问题？
答案 0 :(得分：0)
关于你的第二个解决方案
你试过吗？
- the_span.append（the_button）; 我无法使用此解决方案，因为我希望能够在之后的原始范围内使用.text（）和.html（），这将删除该按钮。
the_span.parent().append(the_button);
以节省.text（）和.html（）
的好处答案 1 :(得分：0)
您应该使用.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_span jQuery集合中所有选定元素的文本，即跨度和按钮，因此按钮的文本将更改为与跨度相同的值。
要解决此问题，您应该按以下方式使用它：
the_button.text("Changed Button Name");
$(the_span[0]).text("New Span Content");