在一個div添加輸入與JavaScript

我在我的html頁面這個div顯示爲收藏：在一個div添加輸入與JavaScript

<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 height : auto並單擊輸入出現附加的圖像上，但燈箱外面之後。有沒有其他方法可以做到這一點？

來源

2013-05-08 Drwhite

您將輸入放入容器中，所以它聽起來像是一個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墊片。

來源

2013-05-08 14:36:47

即使'.innerHTML + =「」'它的工作原理是，問題出在div容器的div上面，使用js文件生成的固定高度 – Drwhite 2013-05-08 15:35:36

@Drwhite：是的，我知道'.innerHTML + = ...'似乎工作。我是說不要這樣做。在大多數情況下這是一個不好的做法，並且會在稍後導致問題，尤其是輸入元素。 – 2013-05-08 15:39:09

在一個div添加輸入與JavaScript

回答

相關問題