Javascript 如何在网站中添加登录按钮并根据用户身份验证进行更新

我正在研究playframework，但我相信这个问题更多的是关于web实现的一般主题。我正在创建一个网站，我想把我的登录按钮放在我的主页右上角，并希望根据用户身份验证进行更新

即如果用户登录，则会有

我的个人资料

和

注销

按钮，如果没有，则只有

登录

按钮。我知道如何使用使用不同路径的不同页面来实现它，在这种情况下，我可以加载完整页面，但我不想加载完整页面，相反，我想使用弹出窗口进行登录/注册，并希望用户在登录后重定向回同一页面（点击登录->登录表单作为弹出窗口->提交->登录）url在此过程中不应该改变。我在许多流行网站上见过这种类型的设计，但我不知道如何构建

我做了一些研究并发现，我们可以使用jquery的ajax调用来实现这一点并更新我当前的页面DOM。在这种情况下，我应该更新导航栏右上角的DOM，所以我只会请求该部分的html，但我不知道具体怎么做？我是网站设计新手，这是一个好的设计还是有其他最好的方法来完成同样的任务

如果有人能告诉我如何逐页更新我的相关css&js文件的链接，那也是很值得的。我的意思是，如果某个css文件没有在特定页面中使用，如何删除对该文件的引用，并添加一个与该页面相关的新链接

---

很抱歉，如果在这里问这样的基本问题看起来很愚蠢，但我只想澄清我在web设计和实现方面的概念。如果有人能推荐我一本书或一个链接来阅读这些主题，那也会很有帮助。

如果我正确理解了你的问题，你是在寻求DOM方面的帮助，这是等式的一部分吗

下面是一个示例（请参阅JSFIDLE，因为当前代码希望登录按钮在启动时出现）：

---

如果我正确理解了你的问题，你是在寻求DOM方面的帮助——这是等式的一部分

下面是一个示例（请参阅JSFIDLE，因为当前代码希望登录按钮在启动时出现）：

function login (logtype) {
    var insertInput = function (value) {
        document.getElementById('logincontainer').insertBefore(
        document.createElement('input'),
        document.getElementsByTagName('input')[0]);
        var newButton = document.getElementsByTagName('input')[0];
        newButton.type = 'button';
        newButton.value = value;
        if (value === 'logout') {
            newButton.onclick = function () {login('logout');};
        }
        if (value === 'login') {
            newButton.onclick = function () {login('login');};
        }
        if (value === 'myprofile') {
            newButton.onclick = function () {window.location.href='http://jsfiddle.net/user/b00t/fiddles/';};
        }
    },
    deleteInput = function () {
        document.getElementById('logincontainer').removeChild(document.getElementById('logincontainer').lastChild);
    };
    if (logtype === 'login') {
        var logIn = confirm('Login?');
        if (logIn) {
            insertInput('myprofile');
            insertInput('logout');
            deleteInput();
        }
    }
    else if (logtype === 'logout') {
        var logOut = confirm('Logout?');
        if (logOut) {
            insertInput('login');
            deleteInput();
            deleteInput();
        }
    }
}