javascript - 移动|克隆元素并从原始位置删除

Question

我有这个 HTML 标记:

<div id="subscriptionbox-1">
    <div class="topbar">
        <span class="title">Express</span>
    </div>
    <div class="bottombar">
        <span class="price">300 bsf</span>
        <span class="link"><a class="button  " href="#">Sign Up</a></span>
    </div>
</div>

我需要将元素从 DOM 上的一个位置移动到另一个位置，移动后然后从原始位置删除。这就是我正在做的事情:

$(document).ready(function(){
  $('.topbar .title').append('<br/>');
  $('.bottombar .price').clone().appendTo('.topbar .title');
  $('.bottombar .price').remove();
});

但是结果不是我想要的，因为我得到了这个:

<span class="title">Express<br><span class="price">300 bsf</span></span>

当我想要这个时:

<span class="title">Express</span><br><span class="price">300 bsf</span>

我做错了什么？

Answer 1

使用clone()然后删除原始内容似乎是多余的。

尝试

$('.topbar .title').append('<br/>').parent().append($('.bottombar .price'));