Question

我有以下代码：

<div id="test">
    <img src="#">
</div>

我将span附加到此div标签：

$('div#test').append('<span>123123</span>');

此结果：

<div id="test">
    <img src="#">
    <span>123123<span>
</div>

但是我想先得到span，像这样：

<div id="test">
   <span>123123<span>
   <img src="#">
</div>

感谢您的帮助

Answer 1

您可以使用$.prepend()

$('div#test').prepend('<span>123123</span>');

Answer 2

您可以使用prepend();更改顺序。

Answer 3

.before()更容易记住。然后是对应的.insertBefore()。然后是前面提到的.prepend()及其相反的.prependTo()。

普通JavaScript具有.before()，.prepend()，.insertBefore()和我最喜欢的.insertAdjacentHTML()。 .insertAdjacentHTML()就像.innerHTML，可以将htmlString插入到相对于元素的4个不同位置。

签名：
    DOMObject .insertAdjacentHTML( 位置 , htmlString )
  位置：
  “ beforebegin” <div> “ afterbegin” ...“ beforeend” </div>“ afterend”

$('#test1 img').before('<span>123123</span>');

$('<span>123123</span>').insertBefore('#test2 img');

$('#test3').prepend('<span>123123</span>');

$('<span>123123</span>').prependTo('#test4');

document.querySelector('#test5 img').before(document.createElement('SPAN').textContent = '123123');

var span = document.createElement('SPAN');
span.textContent = '123123';
document.querySelector('#test6').insertBefore(span, document.querySelector('#test6 img'));

document.querySelector('#test7').prepend(document.createElement('SPAN').textContent = '123123');

document.querySelector('#test8').insertAdjacentHTML('afterbegin', '<span>123123</span>');

<div id="test1">
  <img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>

<div id="test2">
  <img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>

<div id="test3">
  <img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>

<div id="test4">
  <img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>

<div id="test5">
  <img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>

<div id="test6">
  <img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>

<div id="test7">
  <img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>

<div id="test8">
  <img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery，更改附加标签的顺序

3 个答案: