我的DOM树看起来像这样：
<body>
<div>
**insert new p here**
<p></p>
</div>
</body>
如何将一个元素附加到div，以便它始终出现在初始p元素之前，因此堆叠在后续p元素之上？
答案 0 :(得分：2)
如果您只想让插入的<p></p>成为<div></div>的第一个孩子，则可以使用.prepend()。在你的情况下，它看起来像这样：
<body>
<div id="paras">
<p>World</p>
</div>
<script src="path/to/jquery"></script>
<script type="text/javascript">
$('#paras').prepend('<p>Hello</p>');
</script>
</body>
如果事实上你只是想把它放在<p></p>之上并且上面还有其他元素，你应该使用nicael的答案。
答案 1 :(得分：0)
如果您添加新的<p>，则会有很多<p>个代码，因此我建议您为其分配一个ID。
E.g：
<body>
<div>
**insert new p here**
<p id="main">
</p>
</div>
</body>
然后代码是：
$( "<p>something there</p>" ).insertBefore( "p#main" );
答案 2 :(得分：0)
除了已列出的选项之外，还有一些选项;为了完整（或尽可能接近）：
使用prepend()：
// creates a new <p> element
var newElement = $('<p>', {
// sets its text to 'Hello'
// (internally using the text() method):
'text' : 'Hello'
});
// sets prepends the created-<p> to the
// elements matched by the selector:
$('div').prepend(newElement);
var newElement = $('<p>', {
'text': 'Hello'
});
$('div').prepend(newElement);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<!-- insert new p here -->
<p>
World
</p>
</div>
使用prependTo()：
$('<p>', {
'text' : 'Hello'
// prepending to the each <div> element:
}).prependTo('div');
$('<p>', {
'text': 'Hello'
}).prependTo('div');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<!-- insert new p here -->
<p>
World
</p>
</div>
使用before()：
var newElement = $('<p>', {
'text' : 'Hello'
});
// inserts the created-<p> before all elements
// matched by the selector:
$('p').before(newElement);
var newElement = $('<p>', {
'text': 'Hello'
});
$('p').before(newElement);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<!-- insert new p here -->
<p>
World
</p>
</div>
使用parentNode.insertBefore()：
// creating a <p> element:
var newElement = document.createElement('p'),
// reference to the (first) <div> element in
// the document:
div = document.querySelector('div');
// setting the textContent of the created-<p>:
newElement.textContent = 'Hello';
// inserting the created-<p> element before the
// firstChild of the <div> element we found (above):
div.insertBefore(newElement, div.firstChild);
var newElement = document.createElement('p'),
div = document.querySelector('div');
newElement.textContent = 'Hello';
div.insertBefore(newElement, div.firstChild);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<!-- insert new p here -->
<p>
World
</p>
</div>
使用Node.insertAdjacentHTML()：
// finding the first <p> element in the document:
var p = document.querySelector('p');
// inserting the supplied HTML string before
// that found-<p> element,
// strings:
// 'beforebegin': before the element itself,
// 'afterbegin': before the first existing child-node,
// 'beforeend': after the last existing child-node,
// 'afterend': after the element itself:
p.insertAdjacentHTML('beforebegin', '<p>Hello</p>');
var p = document.querySelector('p');
p.insertAdjacentHTML('beforebegin', '<p>Hello</p>');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<!-- insert new p here -->
<p>
World
</p>
</div>
再次使用Node.insertAdjacentHTML()，但使用'afterbegin'
// finding the first <div> element in the document:
var div = document.querySelector('div');
// inserting the supplied HTML inside of the found <div>,
// before its existing content:
div.insertAdjacentHTML('afterbegin', '<p>Hello</p>');
var div = document.querySelector('div');
div.insertAdjacentHTML('afterbegin', '<p>Hello</p>');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<!-- insert new p here -->
<p>
World
</p>
</div>
参考文献：