jQuery 如何插入元素作为第一个孩子？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4527911/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to insert element as a first child?
提问by Rana Imtiaz
I want to add a div as a first element using jquery on each click of a button
我想在每次单击按钮时使用 jquery 添加一个 div 作为第一个元素
<div id='parent-div'>
<!--insert element as a first child here ...-->
<div class='child-div'>some text</div>
<div class='child-div'>some text</div>
<div class='child-div'>some text</div>
</div>
回答by Mohamed Nuur
Try the $.prepend()function.
试试这个$.prepend()功能。
Usage
用法
$("#parent-div").prepend("<div class='child-div'>some text</div>");
Demo
演示
var i = 0;
$(document).ready(function () {
$('.add').on('click', function (event) {
var html = "<div class='child-div'>some text " + i++ + "</div>";
$("#parent-div").prepend(html);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="parent-div">
<div>Hello World</div>
</div>
<input type="button" value="add" class="add" />回答by dtsn
Extending on what @vabhatia said, this is what you want in native JavaScript (without JQuery).
扩展 @vabhatia 所说的，这就是您在原生 JavaScript（没有 JQuery）中想要的。
ParentNode.insertBefore(<your element>, ParentNode.firstChild);
ParentNode.insertBefore(<your element>, ParentNode.firstChild);
回答by WizxX20
Use: $("<p>Test</p>").prependTo(".inner");Check out the .prepend documentation on jquery.com
使用：$("<p>Test</p>").prependTo(".inner");查看jquery.com 上的 .prepend 文档
回答by Varun Bhatia
parentNode.insertBefore(newChild, refChild)
Inserts the node newChild as a child of parentNode before the existing child node refChild. (Returns newChild.)
在现有子节点 refChild 之前插入节点 newChild 作为 parentNode 的子节点。（返回 newChild。）
If refChild is null, newChild is added at the end of the list of children. Equivalently, and more readably, use parentNode.appendChild(newChild).
如果 refChild 为 null，则将 newChild 添加到子项列表的末尾。同样，更易读，使用 parentNode.appendChild(newChild)。
回答by Gibolt
parentElement.prepend(newFirstChild);
This is a new addition in (likely) ES7. It is now vanilla JS, probably due to the popularity in jQuery. It is currently available in Chrome, FF, and Opera. Transpilers should be able to handle it until it becomes available everywhere.
这是（可能）ES7 中的新增功能。它现在是 vanilla JS，可能是由于 jQuery 的流行。它目前在 Chrome、FF 和 Opera 中可用。转译器应该能够处理它，直到它无处不在。
P.S. You can directly prepend strings
PS 你可以直接在字符串前面加上
parentElement.prepend('This text!');
Links: developer.mozilla.org- Polyfill
回答by Chintan7027
Required here
这里需要
<div class="outer">Outer Text
<div class="inner"> Inner Text</div>
</div>
<div class="outer">Outer Text
<div class="inner"> Inner Text</div>
</div>
added by
添加者
$(document).ready(function(){
$('.inner').prepend('<div class="middle">New Text Middle</div>');
});
$(document).ready(function(){
$('.inner').prepend('<div class="middle">New Text Middle</div>');
});
回答by THAS
$(".child-div div:first").before("Your div code or some text");
$(".child-div div:first").before("Your div code or some text");
回答by Sayed
$('.parent-div').children(':first').before("<div class='child-div'>some text</div>");
