Question

我在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”）？ “可见”：“隐藏”;

Answer 1

我真的很困惑你想要实现的目标。您应该像这样创建新的

<div id="new">

或者你应该在第一次点击时看到div。添加到您的功能

p.style.visibility = 'visible';

您可以在前一个示例

中看到此http://jsfiddle.net/tkKun/

Answer 2

创建的div是隐藏的，因为你将它们添加到div＆＃34; new＆＃34;它具有样式可见性：隐藏。

要显示它们，只需将此行添加到添加功能的底部：

p.style.visibility = 'visible';

当你创建新的div时，不建议给它们所有的id相同的new1，它最好用j值分配每个新div的id。

Answer 3

您可以使用

document.createNode();

或纯文本

var foo = '<div> bar </div>';

Answer 4

不用担心，最后我找到了答案，

<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>

在javascript中将动态div添加到另一个div

4 个答案: