Javascript 仅附加一次文本框

我有一个复选框，可以在单击时附加一个文本框。现在的问题是，每次我单击该复选框时，都会出现一个新的文本框，如果我单击该复选框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>

降级到子级
函数myFunction（）{
var span=document.createElement（'span'）；
span.innerHTML=''；
document.getElementById（“DemoSecontainer”）.appendChild（span）；
}

我想实现这样的目标：

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

var-tmp=1；
函数myFunction（）{
如果（tmp%2==1）
{
var span=document.createElement（'span'）；
span.innerHTML=''；
document.getElementById（“DemoSecontainer”）.appendChild（span）；
tmp++；
}
其他的
{
var d=document.getElementById（“DemoSecontainer”）；
var d_nested=document.getElementById（“父”）；
var throwayNode=d.removeChild（d_嵌套）；
tmp++；
}
}

您可以在添加文本框之前检查元素（文本框）是否存在，如下所示：

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);
    }
}

函数myFunction（）{
//检查id为“parent”的文本框是否存在，如果不存在则添加
如果（！document.getElementById（“父项”））{
var span=document.createElement（'span'）；
span.innerHTML=''；
document.getElementById（“DemoSecontainer”）.appendChild（span）；
}
}

或

函数myFunction（）{
//检查id为“parent”的文本框是否存在，如果不存在则添加
if（！document.querySelector（#demodecontainer input#parent”））{
var span=document.createElement（'span'）；
span.innerHTML=''；
document.getElementById（“DemoSecontainer”）.appendChild（span）；
}
}

您可以在添加文本框之前检查元素（文本框）是否存在，如下所示：

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);
    }
}

函数myFunction（）{
//检查id为“parent”的文本框是否存在，如果不存在则添加
如果（！document.getElementById（“父项”））{
var span=document.createElement（'span'）；
span.innerHTML=''；
document.getElementById（“DemoSecontainer”）.appendChild（span）；
}
}

或

函数myFunction（）{
//检查id为“parent”的文本框是否存在，如果不存在则添加
if（！document.querySelector（#demodecontainer input#parent”））{
var span=document.createElement（'span'）；
span.innerHTML=''；
document.getElementById（“DemoSecontainer”）.appendChild（span）；
}
}

如果您不介意每次单击textbox时再次生成它，请使用innerHTML替换容器的全部内容，而不是appendChild：

---

document.getElementById（“DemoSecontainer”）.innerHTML=''如果您不介意每次单击textbox时再次生成它，请使用innerHTML替换容器的全部内容，而不是appendChild：


document.getElementById（“DemoSecontainer”）.innerHTML=''将脚本替换为以下脚本：-

<script>
function myFunction() {
    var elem = document.getElementById("parent");
    if(elem != null)
elem.parentNode.removeChild(elem);
var span = document.createElement('SPAN');
span.innerHTML = '<input id="parent" name = "parent" type="textbox" />';
document.getElementById("DemoteContainer").appendChild(span);
// document.getElementById("demoteTask").disabled = true;
}
</script>


函数myFunction（）{
var elem=document.getElementById（“父项”）；
if（elem！=null）
elem.parentNode.removeChild（elem）；
var span=document.createElement（'span'）；
span.innerHTML=''；
document.getElementById（“DemoSecontainer”）.appendChild（span）；
//document.getElementById（“demoteTask”）.disabled=true；
}
将脚本替换为以下脚本：-

<script>
function myFunction() {
    var elem = document.getElementById("parent");
    if(elem != null)
elem.parentNode.removeChild(elem);
var span = document.createElement('SPAN');
span.innerHTML = '<input id="parent" name = "parent" type="textbox" />';
document.getElementById("DemoteContainer").appendChild(span);
// document.getElementById("demoteTask").disabled = true;
}
</script>


函数myFunction（）{
var elem=document.getElementById（“父项”）；
if（elem！=null）
elem.parentNode.removeChild（elem）；
var span=document.createElement（'span'）；
span.innerHTML=''；
document.getElementById（“DemoSecontainer”）.appendChild（span）；
//document.getElementById（“demoteTask”）.disabled=true；
}

降级到子级
函数myFunction（）{
var checkBox=document.getElementById（'demoteTask'）；
如果（！checkBox.checked）{
document.getElementById（“父”）.remove（）
}否则{
var span=document.createElement（'span'）；
span.innerHTML=''；
document.getElementById（“DemoSecontainer”）.appendChild（span）；
}
}

降级到子级
函数myFunction（）{
var checkBox=document.getElementById（'demoteTask'）；
如果（！checkBox.checked）{
document.getElementById（“父”）.remove（）
}否则{
var span=document.createElement（'span'）；
span.innerHTML=''；
document.getElementById（“DemoSecontainer”）.appendChild（span）；
}
}
我不希望每次单击时都生成它。。这就是我现在面临的问题。我不希望每次单击时都生成它。。这就是我现在面临的问题。我不希望我的复选框被禁用，因为其他功能取决于它的值。我不希望我的复选框被禁用，因为其他功能取决于它的值。我也想在第二次单击时删除它，如果文本框存在，我也想在第二次单击时删除它。如果文本框存在，我也想在第二次单击时删除它单击如果文本框存在，您想删除什么？如果用户不想勾选复选框，并且错误地勾选了复选框，现在他想删除它，我也想在第二次单击时删除它如果文本框存在，您想删除什么？如果用户不想勾选复选框，并且错误地勾选了复选框，现在他想删除它