在一个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

回答

相关问题