첫째 아이로 요소를 삽입하는 방법은?

첫째 아이로 요소를 삽입하는 방법은?

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

그 기능을 사용해 보세요.

사용.

$("#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 없이) 네이티브 자바스크립트로 원하는 것입니다.

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

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

parentNode.insertBefore(newChild, refChild)

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

refChild가 null이면 child 목록 끝에 newChild가 추가됩니다.parentNode.appendChild(newChild)와 동일하게 보다 쉽게 사용할 수 있습니다.

parentElement.prepend(newFirstChild);

ES7에 새로 추가된 기능입니다.지금은 jQuery에서 인기가 많아서인지 바닐라 JS입니다.현재 크롬, FF, 오페라에서 이용 가능합니다.트랜스필러는 어디에서나 사용할 수 있게 될 때까지 이를 처리할 수 있어야 합니다.

P.S. 당신은 직접 문자열을 붙일 수 있습니다.

parentElement.prepend('This text!');

링크: developer.mozilla.org - 폴리필

필수 항목

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

가 추가한

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

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

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

언급URL : https://stackoverflow.com/questions/4527911/how-to-insert-element-as-a-first-child