使用 javascript 在 div 中添加输入

Question

我的 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" 的 div 在其 css 中具有 height : auto 并且在单击添加图像后会出现一个输入，但在灯箱之外。 还有其他方法吗？

Answer 1

您将输入放入容器中，所以这听起来像是一个 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。