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 をループしています)。

そして、その下に移動ボタンが来ます。

また、三項演算子のようなcssを使用しています。例 el.style.visibility = (el.style.visibility == "hidden") ? 「表示」：「非表示」;

4

4 に答える 4

0

使用できます

document.createNode();

またはプレーンテキスト

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

あなたが何を達成しようとしているのか、私は本当に困惑しています。このように新しいdivを作成する必要があります

<div id="new">

または、最初のクリックで div を表示する必要があります。これを関数に追加します

p.style.visibility = 'visible';

前の例については、このhttp://jsfiddle.net/tkKun/を見ることができます

于 2012-12-06T05:25:13.433 に答える
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 に答える
0

作成された div は、visibility:hidden スタイルの div "new" の下に追加したため、非表示になっています。

それらを表示するには、次の行を add 関数の末尾に追加するだけです。

p.style.visibility = 'visible';

新しい div を作成するときは、それらすべてに同じ ID new1 を与えることはお勧めできません。新しい div のそれぞれの ID に j 値を割り当てる方がよいでしょう。

于 2012-12-06T05:31:26.800 に答える