javascript - 使用 Javascript 更改完整的 DIV 内容

Question

我是 Javascript 新手，并且已经知道如何用它来更改 HTML 中的内容。 但现在，我想更改完整的 div 内容。

我有一个带有 2 个按钮的 div，其中一个按钮称为“登录”。 我想要的是:

当访问者点击“登录”时，div 会显示“其他内容”，您可以立即登录。

我该怎么做？

编辑:

DIV 内容:

        <div id="vote" align="center">
        <span style="font-size: 30px">Voten</span><br /><br />
        <?php
            if(isset($_SESSION['username']) && isset($_SESSION['password'])) {
        ?>

        <?php
            } else {
        ?>
            <script type="text/javascript">
                function login() {
                    Change div content....
                }

                function register() {
                    alert('coming soon, lol');
                }
            </script>
            You must be logged in, to vote.<br />
            <input type="button" class="button" name="login" id="login" value="Login" onclick="login()" /><br /><br />
            Not a member yet?<br />
            <input type="button" class="button" name="login" id="register" value="Register now!" onclick="register()" />
        <?php
            }
        ?>

再次:我想要的是，如果访问者单击登录按钮，div 内容将更改为不同的 html 代码。

Answer 1

使用纯 JavaScript，您有两种可能性:

1. 使用 div 对象的innerHTML 属性，它将解析您并创建 DOM 节点
2. 自己创建这些 DOM 节点。 Wikipedia Link for DOM

使用innerHTML :

这将使用浏览器的 HTML 解析器。

// You first have to select this DIV, for example by Id
var divContainer = document.getElementById('idOfDiv');

// Let's set the new HTML content of the div
divContainer.innerHTML = '<b>The HTML code you want !</b>';

创建 DOM 节点:

var divContainer = document.getElementById('idOfDiv');

// You need to create the DOM nodes you want want to append
var newDomNode = document.createElement('p'); // Put as property the tag you want to create

// You have multiple choices here, you can set again the newDomNode innerHTML :
newDomNode.innerHTML = '<b>Some HTML</b>';

// Or the innerText : ( This will just put text )
newDomNode.innerText = 'Some Text to say Hello!';

然后您需要将创建的 newDomNode 附加到所需的 DIV，这会将节点作为容器的最后一个子节点插入:

divContainer.appendChild();

您可以递归地附加这些节点。例如，您可以将另一个 DOM 节点附加到 newDomNode。 如果您想使用 divContainer.insertBefore() (link) 也可以能够将节点放在您想要的位置。

这是纯 JavaScript，这是理解 JavaScript 工作原理的好方法。在学习 jQuery 之前了解 DOM 非常重要。但在现实生活中，使用像 jQuery 这样的库会更容易。