refresh DOM after append element

Answer 1

You need to use event delegation for dynamically added element.

$(document).ready(function() {
    $('#main_body').append("
Hello
Click");
    $('#main_body').on('click', '#but', function() {
        alert( "bla bla" );
    });
});

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all children matching a selector, whether those children exist now or are added in the future