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 回答