0

我在 html、js 和 css 中有以下代码。

<html>
    <head>
        <script type="text/javascript">

        function add() {
            for(var j=0;j<4;j++){
            var i = document.getElementById( 'old' );
            var d = document.createElement( 'div' );
            d.id = "new1";
            d.innerHTML = i.innerHTML ;
            var p = document.getElementById('new');
            p.appendChild(d);
        }

    }    
        </script>

    </head>
    <body>
        <div id="old" style="visibility:hidden;">
        <select>
            <option value="pls">Please</option>
            <option value="1">&lt</option>
            <option value="2">&gt</option>
            <option value="3">=</option>
        </select>
            <input type="text" value=""/>
        </div>

        <hr/>
        <div id="new" style="visibility:hidden;">
        <input type="button" value="go"/>
        </div>
        <hr/>
        <button onclick="add();">Add</button><br>        
    </body>
    </html>

在这里，我试图在单击添加按钮时显示动态 div。它只是简单地添加，但默认情况下 div 是可见的，所以我通过 css style="hidden" 隐藏它。现在点击添加按钮，它正在添加，但 div 是隐藏的。在这里，我遇到了如何显示 div 的问题（这里循环，即 4）。

Go 按钮会出现在它的下方。

我也使用像三元运算符一样的css。例如 el.style.visibility = (el.style.visibility == "hidden") ？“可见”：“隐藏”；

4

4 回答 4

0

我真的很困惑你想要达到什么目的。您应该像这样创建新的 div

<div id="new">

或者您应该在第一次单击时使 div 可见。将此添加到您的功能

p.style.visibility = 'visible';

对于前一个示例，您可以看到这个http://jsfiddle.net/tkKun/

于 2012-12-06T05:25:13.433 回答
0

创建的 div 是隐藏的，因为您将它们添加到具有样式 visibility:hidden 的 div "new" 下。

要显示它们，只需将此行添加到 add 函数的底部：

p.style.visibility = 'visible';

当你创建新的 div 时，不建议给它们都赋予相同的 id new1，最好为每个新 div 的 id 分配 j 值。

于 2012-12-06T05:31:26.800 回答
0

您可以使用

document.createNode();

或纯文本

var foo = '<div> bar </div>';
于 2012-12-06T05:36:51.660 回答
0

不用担心，终于找到答案了 

<html>
    <head>
        <script type="text/javascript">

        function add() {

            for(var j=0;j<4;j++){

            var i = document.getElementById( 'old' );
            var d = document.createElement( 'div' );
            d.id = "div"+j;
            d.innerHTML = i.innerHTML ;
            var p = document.getElementById('new');
            p.style.visibility = 'visible';
            p.appendChild(d);           

        }
        var d = document.createElement( 'div' );
        var l = document.getElementById('one');
        l.style.visibility = 'visible';
        l.appendChild(d);

    }    
        </script>

    </head>
    <body>
        <div id="old" style="visibility:hidden;">
        <select>
            <option value="pls">Please</option>
            <option value="1">&lt</option>
            <option value="2">&gt</option>
            <option value="3">=</option>
        </select>
            <input type="text" value=""/>
        </div>

        <hr/>
        <div id="new" style="visibility:hidden;">

        </div>
        <div id="one" style="visibility:hidden;">
        <br/><input type="button" value="go"/>
        </div>
        <hr/>
        <button onclick="add();">Add</button><br>        
    </body>
    </html>
于 2012-12-07T11:11:08.617 回答