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

我想在每次单击按钮时使用 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>
130608 次浏览
小开
最佳答案

Try the $.prepend() function.

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

小开

Use: $("<p>Test</p>").prependTo(".inner"); Check out the .prepend documentation on jquery.com

小开

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

小开 
$('.parent-div').children(':first').before("<div class='child-div'>some text</div>");
小开 
parentNode.insertBefore(newChild, refChild)

Inserts the node newChild as a child of parentNode before the existing child node refChild. (Returns newChild.)

If refChild is null, newChild is added at the end of the list of children. Equivalently, and more readably, use parentNode.appendChild(newChild).

小开

Extending on what @vabhatia said, this is what you want in native JavaScript (without JQuery).

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

小开

Required here

<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>'); });

小开 
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.

P.S. You can directly prepend strings 

parentElement.prepend('This text!');

Links: developer.mozilla.org - Polyfill


提交答案