SO - 18271000

by Arun P Johny

HTML

<form action="" method="post" accept-charset="UTF-8">
    <textarea name="link" id="link" cols="30" rows="5"></textarea><br>
    <div id="linkgo">paste link</div>
</form>


<div id="wrapper">
    <div class="sample">
        some sample text....some sample content
    </div>
    <div class="sample">
        some sample text....some sample content
    </div>
</div>

CSS

#wrapper {
    margin-top:30px;
}

.sample {
    height:50px
}

#linkgo {
    background:#3265ce;
    padding:3px 8px;
    color:white;
    display:inline-block;
}

#linkgo:hover {
    cursor:pointer;
}
}

JavaScript

$(document).ready(function() {
    
    $("#linkgo").one('click', function () {
        var a = $("<a />", {
            id: 'tablelink',
            href: $('#link').val()
        });
        $("#wrapper").wrapInner(a);    
    });
    $('#link').change(function() {
        var newurl = $('#link').val();
        $('a#tablelink').attr('href', newurl);
    });
});