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

【问题标题】：adding dynamic div to another div in javascript在javascript中将动态div添加到另一个div
【发布时间】：2012-11-24 02:44:21
【问题描述】：

我在 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 == "隐藏") ? “可见”：“隐藏”；

【问题讨论】：

标签： javascript html css

【解决方案1】：

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

<div id="new">

或者你应该让 div 在第一次点击时可见。将此添加到您的函数中

p.style.visibility = 'visible';

你可以在前面的例子中看到这个http://jsfiddle.net/tkKun/

【讨论】：

如果你想让按钮下来，那么你必须在它之前插入你的 div。而不是：p.appendChild(d); 你应该做p.insertBefore(d, p.firstChild);
是的，我明白了。有没有办法获得那些动态的 div id 值。表示 d.id = "div"+j；会生成id。我需要根据 id 在哪个文本框中打印输入的内容。

【解决方案2】：

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

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

p.style.visibility = 'visible';

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

【讨论】：

【解决方案3】：

你可以使用

document.createNode();

或纯文本

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

【讨论】：

【解决方案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>

【讨论】：