如何通过 JavaScript 创建一个新的 HTML 复选框？答案

【问题标题】：How to create a new HTML checkbox via JavaScript?如何通过 JavaScript 创建一个新的 HTML 复选框？
【发布时间】：2023-03-17 05:59:01
【问题描述】：

我在 HTML 中定义了一个按钮，它调用一个函数来在我的 JS 中创建一个对象。另外，我希望这个按钮在 HTML 中“生成”一个新复选框（名称和值取决于以前创建的对象）的创建，比如说在 div id XY 中。

虽然我认为这并不重要，但这是我目前的东西。

html

<input id="button" value="pick Brakiri" onclick="initiate('Brakiri')">

function initiate(faction){
calc = new Calc(faction)
}

如果可能，我想避免使用 jQuery。

谢谢。

【问题讨论】：

w3.org/wiki/Creating_and_modifying_HTML
您能否更好地解释“名称和值取决于以前创建的对象”？否则document.createElement 将是方式
var i = document.createElement('input'); i.type='checkbox';

标签： javascript html button checkbox

【解决方案1】：

您应该为此创建一个函数。传入name 和id 并返回一个全新元素的示例：

function createNewCheckboxt(name, id){
    var checkbox = document.createElement('input'); 
    checkbox.type= 'checkbox';
    checkbox.name = name;
    checkbox.id = id;
    return checkbox;
}

之后您只需要选择将其添加到 DOM 的位置即可。比如：

form.appendChild(createNewCheckboxt('theName', 'theID'));

【讨论】：

【解决方案2】：

嗨，如果我理解你的问题，我不知道，但这是通过 javascript 创建新复选框的代码：

var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name";
checkbox.value = "value";
checkbox.id = "id";    
container.appendChild(checkbox);

【讨论】：

【解决方案3】：

您可以使用document.createElement() 方法创建带有type="checkbox" 的<input> 元素。

这将起作用：

<!DOCTYPE html>
<html>
<body>

<p>Click the button to create a Checkbox.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "checkbox");
    x.setAttribute("value", "abc");
    x.setAttribute("name", "xyz");

    document.body.appendChild(x);
}
</script>

</body>
</html>

Reference

【讨论】：