动态混淆html内容

Question

我正在开发一个Web小部件，所以我需要保护一些图像和音频标签的来源。另外我通过jquery函数放置html内容。是否有任何javascript / jquery方法可以动态地混淆整个div？以下是我的代码：

function getHTML(){
    var html = '<div class="col-xs-8 col-xs-offset-4 col-md-10 col-md-offset-2">' +
                    '<div style="margin-right: 16px;">' +
                        '<audio id="audio_widget" src="mysource/data1.mp3"></audio>' +
                        '<audio class="alternate_audio" src="mysource/data2.mp3"></audio>' +
                    '</div>' +
                '</div>'+
        '<ul id="albumList" class="image-list">'+
            '<li><img src="mysource/image1.jpg" alt="" width="100" height="100"></li>'+
            '<li><img src="mysource/image2.jpg" alt="" width="100" height="100"></li>'+
        '</ul>';


//Through this function I want to obfuscate entire 'html' content.
var encoded = someFunction(html);  

return encoded;

}