加 <br> 在两者之间并<span>使用Jquery / Javascript</span>

Question

如何在HTML之后动态添加<br>标签和HTML中的另一个标签？

所以我的之前代码看起来像这样：

<span>Some Text</span><span>Another text</span>

我想看起来像这样：

<span>Some Text</span><br><span>Another text</span>

<div>容器内有一些span标签，是否有办法在div容器内附加所有span标签，以便所有span标签都一个接一个地带有br标签？

请注意， <span>标记是由库生成并附加的，因此我无法更改为<p>标记或具有断线的其他内容。

Answer 1

获取除最后一个跨度之外的所有跨度，因为您不需要在最后一个span之后放置br标签，然后使用after()方法在元素after()附加br标签。

 // with pure css selector $('.con > span:not(:last-of-type)').after('<br/>') // or using jQuery :last // $('.con span:not(:last)').after('<br/>') 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="con"> <span>Some Text</span><span>Another text</span> <span>Some Text</span><span>Another text</span> </div> 

---

参考：

1. :not
2. :last
3. :last-of-type
4. after
5. 子选择器（“父>子”）

---

更新：使用纯CSS可以使用clear属性。

 span { float:left; clear:both; } 

 <div class="con"> <span>Some Text</span><span>Another text</span> <span>Some Text</span><span>Another text</span> </div> 

Answer 2

您可以使用insertAfter方法添加html标记

 $('span').each(function(i, v) { $('<br/>').insertAfter($(this)) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span>Some Text</span><span>Another text</span>