加 <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>