將動態div添加到javascript中的另一個div

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是隱藏的。 在這里我面臨一個問題，如何顯示股利（這里循環即4）。

轉到按鈕將位於其下方。

我也使用css像三元運算符。 例如el.style.visibility =（el.style.visibility ==“隱藏”）？ “ visible”：“隱藏”;

Answer 1

我真的為您要實現的目標感到困惑。 您應該像這樣創建新的div

<div id="new">

或者，您應該在第一次單擊時使div可見。 添加到您的功能

p.style.visibility = 'visible';

您可以在前面的示例中看到此http://jsfiddle.net/tkKun/

Answer 2

創建的div是隱藏的，因為您將它們添加到了樣式為“ hidden”的div“ new”下。

要顯示它們，只需將以下行添加到add函數的底部：

p.style.visibility = 'visible';

當您創建新的div時，不建議給它們所有人相同的id new1，最好將每個新div的id分配給j值。

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>

將動態div添加到javascript中的另一個div

問題描述

4 個解決方案

解決方案1
0 已采納 2012-12-06 05:25:13

解決方案2
0 2012-12-06 05:31:26

解決方案3
0 2012-12-06 05:36:51

解決方案4
0 2012-12-07 11:11:08

將動態div添加到javascript中的另一個div

問題描述

4 個解決方案

解決方案1 0 已采納 2012-12-06 05:25:13

解決方案2 0 2012-12-06 05:31:26

解決方案3 0 2012-12-06 05:36:51

解決方案4 0 2012-12-07 11:11:08

解決方案1
0 已采納 2012-12-06 05:25:13

解決方案2
0 2012-12-06 05:31:26

解決方案3
0 2012-12-06 05:36:51

解決方案4
0 2012-12-07 11:11:08