Question

我有一个像这样的HTML：

<div id="leftBar">
<span>ad</span>
</div>

我也有这个变量：

var msg = '<span>something</span>';

我想在msg元素的开头推送#leftBar变量。我怎么能这样做？

这是预期的结果：

<div id="leftBar">
<span>something</span>
<span>ad</span>
</div>

注意.html()无法按预期工作。因为$('#leftBar').html(msg);删除了我需要保留的现有<span>。

Answer 1

Javascript提供Node.insertBefore()方法

你可以试试这个：

var left = document.getElementById('leftBar')
var span = document.createElement("span");
span.innerHTML = "something"

left.insertBefore(span, left.childNodes[0]);

jsfiddle example

Answer 2

jQuery prepend()方法就是解决方案。 append()方法本质上类似，但它将元素添加为最后一个元素。

Answer 3

使用jquery prepend从头开始添加新元素（作为第一个子元素）。

var msg = '<span>something</span>';
$('#leftBar').prepend(msg)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div id="leftBar">
<span>ad</span>
</div>

Answer 4

leftBar.innerHTML=msg+leftBar.innerHTML;

尝试演示：js fiddle

Answer 5

＆＃13;

$(document).ready(function() {
	var msg = '<span>something</span><br>'; // Your variable -- but i added '<br>' --
	$('button[rel="add"]').click(function() {
  	$('#leftBar').append( msg ); // For add after last element within #leftBar
    //$('#leftBar').append( msg ); // For add before first element within #leftBar
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="leftBar">
  <span>ad</span>
  <br>
</div>

<button rel="add">Add +</button>

＆＃13;

如何在元素的开头插入一些东西？

5 个答案: