juqery load ajax after an element : html code block:

**index.php html block:**

    <div class="row">
        <button id="addoption" type="submit"></i>add</button>
    </div>

**external.php**

    <div class="well" id="optionform" >hello</div> 


I want add `div#optionform` (in externall.php) after `div.row` in index.php

I try this:

    $('#addoption').on('click',function(){
        $(this).parent().after().load( "externall.php #optionform" );
    });

It add but also remove `div.row`. (it replace div.row with `div#optionform`)

I only want add `div#optionform` html block after `div.row`.

how can I do it?

I want this:

    <div class="row">
        <button id="addoption" type="submit"></i>add</button>
    </div>
    <div class="well" id="optionform" >hello</div>