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

我想添加一个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> 

试试$.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" /> 

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

 parentNode.insertBefore(newChild, refChild) 

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

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

根据@vabhatia的说法,这就是你想要的本地JavaScript(没有JQuery)。

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

 parentElement.prepend(newFirstChild); 

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

PS您可以直接预置string

 parentElement.prepend('This text!'); 

链接: developer.mozilla.org – Polyfill

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

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

这里需要

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

由…添加

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