如何将元素作为第一个孩子插入？

我想添加一个div作为第一个使用jQuery的每个button点击元素

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

Answer 1

试试$.prepend()函数。

用法

 $("#parent-div").prepend("<div class='child-div'>some text</div>"); 

演示

 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" /> 

Answer 2

使用： $("<p>Test</p>").prependTo(".inner"); 查看jquery.com上的.prepend文档

Answer 3

 parentNode.insertBefore(newChild, refChild) 

在现有子节点refChild之前插入节点newChild作为parentNode的子节点。 （返回newChild。）

如果refChild为null，则newChild被添加到子列表的末尾。 等价地，更可读地使用parentNode.appendChild（newChild）。

Answer 4

根据@vabhatia的说法，这就是你想要的本地JavaScript（没有JQuery）。

ParentNode.insertBefore(<your element>, ParentNode.firstChild);

Answer 5

 parentElement.prepend(newFirstChild); 

这是（有可能）ES7中的新增function。 现在是香草JS，可能是由于在jQuery中的stream行。 它目前在Chrome，FF和Opera中可用。 运输商应该能够处理它，直到它到处可用。

PS您可以直接预置string

 parentElement.prepend('This text!'); 

链接： developer.mozilla.org – Polyfill

Answer 6

$(".child-div div:first").before("Your div code or some text");

Answer 7

 $('.parent-div').children().before("<div class='child-div'>some text</div>"); 

Answer 8

这里需要

<div class="outer">Outer Text <div class="inner"> Inner Text</div> </div>

由…添加

$(document).ready(function(){ $('.inner').prepend('<div class="middle">New Text Middle</div>'); });