javascript - 内部 HTML - 正确的形式

Question

我试图根据用户是否选择了 Facebook 页面来插入 html。截至目前，我的主要功能(searchOrDropdown())无法正常工作。我正在尝试排除故障，并且想确保我以正确的方式使用inner.HTML js 方法。

谢谢!

 var getDropDown = function () {
        return '
    <div class="btn-group page-actions" dropdown is-open="status.isopen" id ="dropdown_html">
        <button id="button_current_page_name" type="button" class="btn background-color-transparent color-text dropdown-toggle" data-toggle="dropdown">
            <span class="hidden-sm hidden-xs" id="user_pages_selected">Loading your Facebook pages...</span>&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-down"></i>
        </button>
        <ul id="ul_user_pages_list" class="dropdown-menu" role="menu">
        </ul>
    </div>';
        };

var getSearchBar = function () {
        return '
        <div class="search-wrapper">    
            <form>
                <input style="border-radius:15px" onkeyup ="PagesDropDown.pageValueDidChange(value)" style= "margin-top: 0.5cm" type="text" value="" required class="search-box" placeholder= "Enter your page" autofocus>
            </form> 
        </div>';
    };

 var searchOrDropdown=function(value)
    {
         //TODO find the wrapper element
        var wrapper = document.getElementById("sdparent_wrapper"));
        if (!FacebookPage.currentPage) {
            wrapper.innerHTML = getSearchBar();
        } else{
            wrapper.innerHTML = getDropDown();
        }
    };

Answer 1

问题是你的换行符。尝试在每行末尾添加反斜杠:

 var getDropDown = function () {
    return '\
<div class="btn-group page-actions" dropdown is-open="status.isopen" id ="dropdown_html">\
    <button id="button_current_page_name" type="button" class="btn background-color-transparent color-text dropdown-toggle" data-toggle="dropdown">\
        <span class="hidden-sm hidden-xs" id="user_pages_selected">Loading your Facebook pages...</span>&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-down"></i>\
    </button>\
    <ul id="ul_user_pages_list" class="dropdown-menu" role="menu">\
    </ul>\
</div>';
    };

并且您的代码中的括号过多，因此还要更改以下内容:

var wrapper = document.getElementById("sdparent_wrapper");