使用JS动态加载html

Question

这是我的代码：link

1）我正在尝试动态加载我的html。单击“登录选项”时，将显示“登录”，但单击其他​​选项卡（左列）时，将再次显示“登录”。我想只在登录选项中看到我的登录信息。

2）当你单击Login Option两次时，我的代码会绘制2个登录包装器。我只想画一个。我怎样才能做到这一点？

function changeContent(page) 
{
    var pageContent = document.getElementById('page');
    var title = document.getElementById('head')
    var boxWrapper = document.getElementById('box');
    var feeds = document.getElementById('feed-block');
    var chat = document.getElementById('chat');
    var rightContent = document.getElementById('right');

    var inputWrapper = document.createElement("div");
    inputWrapper.className += " login-wrapper";

    var input = document.createElement('div');
    input.className += " input";

    var usr = document.createElement("input");
    usr.placeholder = "Username";
    usr.className += " usr";
    usr.addEventListener("click", onBlur(this));
    usr.addEventListener("click", onFocus(this));

    var faUsr = document.createElement("span");
    faUsr.className += " fa fa-user";

    var sameInput = document.createElement('div');
    sameInput.className += " input"

    var pass = document.createElement("input");
    pass.placeholder = "Password";
    pass.className += " pass";
    pass.addEventListener("click", onBlur(this));
    pass.addEventListener("click", onFocus(this));

    var faPass = document.createElement("span");
    faPass.className += " fa fa-lock";

    var btn = document.createElement("button");
    btn.innerHTML = "Login";
    btn.className += " login-btn";

    rightContent.appendChild(inputWrapper);
    inputWrapper.appendChild(input);
    inputWrapper.appendChild(sameInput);
    inputWrapper.appendChild(btn);
    input.appendChild(usr);
    input.appendChild(faUsr);
    sameInput.appendChild(pass);
    sameInput.appendChild(faPass);

    switch (page) 
    {
        default: alert("This shouldn't happen...");
            break;

        case "Dashboard":
            pageContent.innerHTML = 'Dashboard';
            title.innerHTML = 'Dashboard';
            boxWrapper.style.display = 'flex';
            feeds.style.display = 'block';
            chat.style.display = 'block';
            inputWrapper.style.display = 'none';
            break;

        case "Settings":
            pageContent.innerHTML = 'Settings';
            title.innerHTML = 'Settings';
            boxWrapper.style.display = 'flex';
            feeds.style.display = 'block';
            chat.style.display = 'block';
            inputWrapper.style.display = 'none';
            break;

        case "List menu item":
            pageContent.innerHTML = 'List menu item';
            title.innerHTML = 'List menu item';
            boxWrapper.style.display = 'flex';
            feeds.style.display = 'block';
            chat.style.display = 'block';
            inputWrapper.style.display = 'none';
            break;

        case "Calendar": 
            pageContent.innerHTML = 'Calendar';
            title.innerHTML = 'Calendar';
            boxWrapper.style.display = 'flex';
            feeds.style.display = 'block';
            chat.style.display = 'block';
            inputWrapper.style.display = 'none';
            break;

        case "Pages":
            pageContent.innerHTML = 'Pages';
            title.innerHTML = 'Pages';
            boxWrapper.style.display = 'flex';
            feeds.style.display = 'block';
            chat.style.display = 'block';
            inputWrapper.style.display = 'none';
            break;

        case "Login options":
            pageContent.innerHTML = 'Login options';
            title.innerHTML = 'Login options';
            boxWrapper.style.display = 'none';
            feeds.style.display = 'none';
            chat.style.display = 'none';
            inputWrapper.style.display = 'block';
            break;
    }
}