Question

如何动态添加<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

获取除最后一个之外的所有范围，因为您不需要在最后br之后放置span标记，然后使用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>

参考：

:not
:last
:last-of-type
after
Child Selector (“parent > child”)

更新：使用纯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>

使用Jquery / Javascript在中间和<span>之间添加<br/>

2 个答案: