첫 번째 자식으로 요소를 삽입하는 방법은 무엇입니까?

버튼을 클릭 할 때마다 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> 

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

@vabhatia가 말한 것을 확장하면 JQuery없이 네이티브 JavaScript에서 원하는 것입니다.

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

사용 : jquery.com$("<p>Test</p>").prependTo(".inner"); 에서 .prepend 문서를 확인 하십시오.

parentNode.insertBefore(newChild, refChild)

newChild 노드를 기존 자식 노드 refChild 앞에 parentNode의 자식으로 삽입합니다. (newChild를 반환합니다.)

refChild가 null이면 자식 목록 끝에 newChild가 추가됩니다. 동등하고 더 읽기 쉽게 parentNode.appendChild (newChild)를 사용하십시오.

parentElement.prepend(newFirstChild);

이것은 (아마도) ES7에 새로 추가 된 것입니다. 이제 jQuery의 인기로 인해 바닐라 JS입니다. 현재 Chrome, FF 및 Opera에서 사용할 수 있습니다. 트랜스 파일러는 모든 곳에서 사용할 수있을 때까지 처리 할 수 ​​있어야합니다.

추신 당신은 직접 문자열을 추가 할 수 있습니다

parentElement.prepend('This text!');

링크 : developer.mozilla.org - Polyfill

여기에 필수

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

추가

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

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

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