jquery,附加标签的更改顺序

.before() 更容易记住。那就是它的对应物 .insertBefore() . 还有前面提到的 .prepend() 与之相反的是 .prependTo() .

普通的javascript有 .before() , .prepend() , .insertBefore() 和我最喜欢的 .insertAdjacentHTML() . .insertadjacenthl()。 就像 .innerHTML 可以插入 htmlString 在一个元素的4个不同位置。

签名:
domObject .insertAdjacentHTML( 位置 , HTML字符串 )
职位:
“开始之前” <div> “开始后” ... “在结束之前” </div> “尾端”

$('#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>