使用Javascript更改完整的DIV内容

时间:2014-10-11 20:01:52

标签: javascript html

我是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代码。

1 个答案:

答案 0 :(得分:3)

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

  1. 在div对象上使用innerHTML属性,它将解析您并创建DOM节点
  2. 自己创建这些DOM节点。 Wikipedia Link for DOM
  3. 使用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这样的库会更容易。