Replace children and keep parent

Question

I want to ask a question about this : "How to replace children with other element and keep parent then applied to document." I tried with replaceWith() but not give a solution for me. Here is my code :

template_gallery = '<div class="mahbub-modal">'+
        '<button type="button" class="mahbub-btn-close">'+elmahbub.btn_close+'</button>'+
        '<div class="mahbub-modal-gallery">'+
        '<div class="mahbub-gallery-content">'+
        '<div class="mahbub-column-left">'+
        '<img src="'+elmahbub.source+'" class="mahbub-image" alt="'+elmahbub.alt_image+'">'+
        '<div class="mahbub-btn-more">'+
        '<button type="button" class="mahbub-more-left" title="'+elmahbub.title_prev_button+'">&#10094;</button>'+
        '<button type="button" class="mahbub-more-center" title="'+elmahbub.title_center_button+'">'+elmahbub.icon_btn_center+'</button>'+
        '<button type="button" class="mahbub-more-right" title="'+elmahbub.title_next_button+'">&#10095;</button>'+
        '</div>'+
        '<div class="mahbub-gallery-footprint">'+elmahbub.title+
        '<p class="mahbub-gallery-footprint-subtitle">'+elmahbub.sub_title+'</p>'+
        '</div>'+
        '</div>'+
        '<div class="mahbub-column-right">'+elmahbub.content+
        '</div>'+
        '</div>'+
        '</div>';

Jquery :

if (elmahbub.type == 'video') {
        video_element = '<video width="100%" height="500px" controls>'+
        '<source src="'+elmahbub.source+'" type="video/ogg">'+
        '<source src="'+elmahbub.source+'" type="video/mpeg">'+
        elmahbub.error_load+'</video>';
        if (elmahbub.gallery[0].enabled == false) {
            template_gallery = $(template_gallery).children($('.mahbub-image')).replaceWith(video_element);
            modal = template_gallery;
        }
        else{

        }
    }

I want template gallery have a element video :-) Thank.

Answer 1

Just use jQuery to identify the target parent, than use the html function to append children.

$('#parent-div').html("<h1>test</h1>");

If you want to replace with an existing DOM element just do this...

$('#parent-div').html($('#divIWant'));