H50088：js动态生成html代码的三种形式

1，

    // 方案一
    O.TEMPLATE = '<div class="viewer-container">\
        <div class="viewer-canvas"></div>\
        <div class="viewer-footer">\
            <div class="viewer-title"></div>\
            <ul class="viewer-toolbar">\
                <li class="viewer-zoom-in" data-action="zoom-in"></li>\
                <li class="viewer-zoom-out" data-action="zoom-out"></li>\
                <li class="viewer-one-to-one" data-action="one-to-one"></li>\
                <li class="viewer-reset" data-action="reset"></li>\
                <li class="viewer-prev" data-action="prev"></li>\
                <li class="viewer-play" data-action="play"></li>\
                <li class="viewer-next" data-action="next"></li>\
                <li class="viewer-rotate-left" data-action="rotate-left"></li>\
                <li class="viewer-rotate-right" data-action="rotate-right"></li>\
                <li class="viewer-flip-horizontal" data-action="flip-horizontal"></li>\
                <li class="viewer-flip-vertical" data-action="flip-vertical"></li>\
            </ul>\
            <div class="viewer-navbar">\
                <ul class="viewer-list"></ul>\
            </div>\
        </div>\
        <div class="viewer-tooltip"></div>\
        <div class="viewer-button" data-action="mix"></div>\
        <div class="viewer-player"></div>\
    </div>';

    // 方案二
    var html = "";
    html += '<div class="viewer-container">';
    html += '<div class="viewer-container">';
    html += '<div class="viewer-container">';

    // 方案三
    var htmlVar = '<div id="conter">'
    + '<span class="tipskin"><p class="animate">链接访问权限已经过期！</p></span>'
    + '<div id="keyboard" class="skin2">'
    + '<div class="title" style="text-align:center;">'
    + '<input type="text" class="jptitle" readonly onfocus="this.blur();" placeholder="请输入访问密码" value="">'
    + '</div>'
    + '</div>'
    + '</div>';