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

Question

我希望在每次单击按钮时使用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> 

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

扩展@vabhatia的说法，这就是你想要的原生JavaScript（没有JQuery）。

user b'"user"'

Answer 3

使用：$("<p>Test</p>").prependTo(".inner"); 查看.prepend documentation on jquery.com

Answer 4

parentNode.insertBefore(newChild, refChild)

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

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

Answer 5

var intervalLoadingClient;
function loadingClient(data) {

    var loadingClientDiv = document.getElementById('loadingClient');
    var percentageLoading = document.getElementsByClassName('percentageLoading');
    var charge = 1;
    intervalLoadingClient = intervalLoadingClient || setInterval(barCharge, 1000);

    function barCharge() {
        if (charge >= 76) {
            clearInterval(intervalLoadingClient);
        } else {
            ++charge;
            $(percentageLoading).css("width", charge + "%");
        }
    }

    if (data === "100") {
        clearInterval(intervalLoadingClient);
        $(percentageLoading).css("width", "100%");
        setTimeout(closeLoadingClient, 5000);
        setTimeout(removeLoadingClient, 7000);

        function closeLoadingClient() {
            $(loadingClientDiv).hide("fade", 1000);
        }

        function removeLoadingClient() {
            $(loadingClientDiv).remove();
        }
    }

}

loadingClient(); //Starts the interval
loadingClient("100"); //Ends the interval.

这是（可能）ES7的新增功能。它现在是vanilla JS，可能是由于jQuery中的流行。目前可在Chrome，FF和Opera中使用。运营商应该能够处理它，直到它随处可用。

P.S。你可以直接预先添加字符串

parentElement.prepend(newFirstChild);

链接：developer.mozilla.org - Polyfill

Answer 6

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

Answer 7

此处必须

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

添加

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

Answer 8

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