jQuery .after() Metodu

        jQuery(document).ready(function () {
            jQuery("div").after("<p>div elementinin ardına eklenen p elementi</p>");
        });

        div{width:50px;height:50px;background:blue;}
        p{background:rgb(204, 204, 204);color:#000;padding:3px;margin:2px 0px 3px 0px;}

    <div></div>

        jQuery(document).ready(function () {
            jQuery("div:eq(2)").after("<p>div elementinin ardına eklenen p elementi</p>");
            //Eleman dizilimi 0'dan başlamaktadır.
            //1. elemanı seçmek için eq(0), 2. elemanı seçmek için eq(1) olarak belirtmemiz gerekirdi.
        });

div{width:100px;height:50px;background:blue;margin-bottom:3px;line-height:50px;color:#fff;text-align:center;}
p{background:#ccc;color:#000;padding:3px;margin:2px 0px 3px 0px;}

    <div>1. eleman</div>
    <div>2. eleman</div>
    <div>3. eleman</div>
    <div>4. eleman</div>
    <div>5. eleman</div>
    <div>6. eleman</div>
    <div>7. eleman</div>
    <div>8. eleman</div>

    jQuery(document).ready(function () {
        //"ul" elementinin "li" elemanlarından herhangi birine tıklanırsa
        jQuery("ul li").click(function () {
            //Tıklanan bu "li" elemanının ardına yeni bir "li" elemanı ekle
            jQuery(this).after("
sonradan eklendi
");
        });
    });

ul{width:150px;list-style-type:none;padding:0px;}
ul li{padding:3px;border:1px solid #421f9a;margin:0px 0px 1px 3px;cursor:pointer;}
.kirmizi{border:1px solid red;margin-left:10px;}

    <ul>
        <li>1. eleman</li>
        <li>2. eleman</li>
        <li>3. eleman</li>
        <li>4. eleman</li>
    </ul>