0

私のhtmlページには、このdivがライトボックスとして表示されています:

<div id="container">
    <input type="text" id="user_1" name="user_1" value="user_1"/><br>
    <input type="text" id="user_2" name="user_2" value="user_2"/><br>
    <input type="text" id="user_3" name="user_3" value="user_3"/><br>
    <label onclick="add_input();"><img alt="add_other" src="add.png"></label>
</div>

画像をクリックすると、入力が追加されて表示されます。次の Js 関数を使用してそれを実行しようとしました。

function add_input(){
        var div = document.getElementById('container');
        var input = '<input style="width:300px;" type="text" id="user" name="user" value=""/>'
        div.innerHTML+= input;
    }

id="container"cssを含む div でheight : auto、画像の追加をクリックすると、入力が表示されますが、ライトボックスの外側に表示されます。それを行う他の方法はありますか？

4

1 に答える 1

0

入力をコンテナー内に配置しているため、CSS の問題のように聞こえます。おそらく祖先要素が高さを制限しています。

あなたの関数をWRTし、使用しないでください.innerHTML += "<input...>"

これは破壊的であり、入力要素では特に問題になる可能性があります。

代わりに、作成メソッドを使用して DOM 要素を作成します。

function add_input(){
    var input = document.createElement("input")
    input.style="width:300px;" 
    input.id = input.name = "user";
    document.getElementById('container').appendChild(input);
}

または、どうしても HTML マークアップを使用したい場合は、少なくとも、既存のコンテンツを破壊したり再構築したりしない方法で挿入してください。

これを行うことができます.insertAdjacentHTML()

function add_input(){
    var div = document.getElementById('container');
    var input = '<input style="width:300px;" type="text" id="user" name="user" value=""/>'
    div.insertAdjacentHTML("beforeend", input);
}

古い Firefox には shim が必要です。

于 2013-05-08T14:36:47.073 に答える