javascript - 仅附加文本框一次

Question

我有一个复选框，具有在单击时附加文本框的功能。现在的问题是，每次我单击该复选框时，都会出现一个新的文本框，如果我单击该复选框 10 次，我会得到 10 个文本框。我想停止它，并且单击后我无法使用禁用文本框，因为禁用文本框时有一个功能无法正常工作。对此的任何帮助将不胜感激。

<input onClick="myFunction();" id="demoteTask" name="demoteTask" type="checkbox"/>&nbsp;<label for"demoteTask_cbx">Demote to Child</label>

<span id="DemoteContainer"></span>

<script>
function myFunction() {
var span = document.createElement('SPAN');
span.innerHTML = '<input id="parent" name = "parent" type="textbox" />';
document.getElementById("DemoteContainer").appendChild(span);
}
</script>

我想要实现这样的目标:

<script>
var tmp=1;
function myFunction() {
if(tmp%2==1)
{
var span = document.createElement('SPAN');
span.innerHTML = '<input id="parent" name = "parent" type="textbox" />';
document.getElementById("DemoteContainer").appendChild(span);
tmp++;
}
else
{
var d = document.getElementById("DemoteContainer");
var d_nested = document.getElementById("parent");
var throwawayNode = d.removeChild(d_nested);
tmp++;
}
}
</script>

Answer 1

您可以在添加文本框之前检查元素(文本框)是否存在，如下所示:

function myFunction() {
    //check if text box with id "parent" exists, add if doesn't
    if( !document.getElementById("parent") ) {
        var span = document.createElement('SPAN');
        span.innerHTML = '<input id="parent" name = "parent" type="textbox" />';
        document.getElementById("DemoteContainer").appendChild(span);
    }
}

或

function myFunction() {
    //check if text box with id "parent" exists, add if doesn't
    if( !document.querySelector("#DemoteContainer input#parent") ) {
        var span = document.createElement('SPAN');
        span.innerHTML = '<input id="parent" name = "parent" type="textbox" />';
        document.getElementById("DemoteContainer").appendChild(span);
    }
}