他の要素の上にある要素の中の要素を追加する

Question

他の内容の親のスパンの上にあるスパン要素の内側に要素を追加することはできますか？

HTML

<span id="parent"> 
    <!-- I want the oldest placed here when something is click --> 
    <span id="child1">sample1</span> 
    <span id="child2">sample2</span> 
    <span id="child3">sample3</span> 
<span> 

<button id="write_IT">Put the older!</button> 
<!-- 
    //from php database 

    <span id="oldest"> 
     Test 
    </span> 
--> 

jqueryの

$(document).ready(function() { 
    $(document).on('click', '#write_IT', function(e) { 

    var apb = $("#parent").after("<span id='parent'>"); 
    apb.append('<span id="oldest">Test</span>'); 
    }); 

}); 

Answer 1

使用prepend

$('#write_IT').on("click", function(){ 
 
    $("#parent").prepend('<span id="oldest">Test</span>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id="parent"> 
 
    <!-- I want the oldest placed here when something is click --> 
 
    <span id="child1">sample1</span> 
 
    <span id="child2">sample2</span> 
 
    <span id="child3">sample3</span> 
 
<span> 
 

 
<button id="write_IT">Put the older!</button>

Answer 2

$(document).ready(function() { 
 
    $(document).on('click', '#write_IT', function(e) { 
 

 
    $("#child1").before('<span id="oldest">Test</span>'); 
 

 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id="parent"> 
 
    <!-- I want the oldest placed here when something is click --> 
 
    <span id="child1">sample1</span> 
 
<span id="child2">sample2</span> 
 
<span id="child3">sample3</span> 
 
<span> 
 

 
<button id="write_IT">Put the older!</button> 
 
<!-- 
 
    //from php database 
 

 
    <span id="oldest"> 
 
     Test 
 
    </span> 
 
-->

使用.before()

説明：挿入コンテンツ、マッチした要素の集合内の各要素の前に、パラメータで指定されました。