JSFiddle - React, Tailwind, and code Playground

by Julien Vernet

HTML

<button class="taed-editdom">Modify the DOM</button>
<button class="taed-save">Save the outerHTML</button>

<br><br><br>

<div id="modal3" class="optmodal opt-centered" style="width: 460px;">
    <div class="opt-inner" data-editable='["backgroundColor","backgroundImage","backgroundRepeat","backgroundPosition","color","fontFamily"]'>	<a class="opt-close" href="#" title="Close" data-editable='["backgroundColor","color"]'>&#10005;</a>

        <p class="opt-lead opt-center" data-editable='["color","fontFamily","fontSize","textEdit","textAlign"]'>Subscribe to our mailling list to get the updates to your email inbox...</p>
        <div class="opt-textwrap" data-editable='["color","fontFamily","fontSize","tinymce"]'>
            <p>Subscribe to our mailling list to get the updates to your email inbox...</p>
        </div>
        <hr>
        <form role="form" class="optform" id="layout2">
            <div class="opt-form-group">
                <label for="inputEmail" class="opt-sr-only">Enter Your Email...</label>
                <input type="email" class="opt-form-control opt-input-lg" id="inputEmail" name="email" placeholder="Enter your email" required autofocus="autofocus" data-editable='["textEdit"]'>	<span class="opt-help-block" id="email-suggestions"></span>

            </div>
            <button type="submit" class="opt-btn opt-btn-block" data-editable='["backgroundColor","fontSize","color", "textEdit"]'>Subscribe</button>
        </form>
    </div>
</div>

CSS

#modal3 {
    background: #efefef;
}

JavaScript

$('.taed-editdom').on('click', function (e) {
    e.preventDefault();
    $('#modal3').css('backgroundColor','red');
});

$('.taed-save').on('click', function (e) {
    e.preventDefault();
    // Get the outerHTML (http://jsperf.com/outerhtml-vs-jquery-clone-hack/4)
    var outerHtml = $('#modal3').clone().wrap('<div>').parent().html();
    var htmlRaw = $('#modal3').clone();
    var htmlClean = htmlRaw.find('*[data-editable]').removeAttr('data-editable');
    var htmlCleanString = htmlClean.wrap('<div>').parent().html();
    var htmlString = $('#modal3').clone().find('*[data-editable]').removeAttr('data-editable').wrap('<div>').parent().html();

    console.log(outerHtml);

    $('#taed-outerhtml').val(htmlCleanString);
});