代码之家 › 专栏 › 技术社区 › Mostafa Norzade Sachin Shanbhag

jquery,附加标签的更改顺序

jquery javascript

Mostafa Norzade Sachin Shanbhag · 技术社区 · 7 年前

我有以下代码:

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

我追加 span 为了这个 div 标签:

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

此结果:

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

但我想得到 跨度 首先,像这样:

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

谢谢你的帮助

2 回复 | 直到 7 年前

Ele 7 年前

你可以用 $.prepend()

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

Damián Acevedo 7 年前

你可以用 prepend(); 更改订单。

zer00ne 7 年前

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