如何优雅地在DOM中添加和删除元素

Question

因此，我有一个动态表单，其中某些输入仅应根据用户已经输入的内容变为可用（可见）。 我开始尝试的方式有一个错误的气味。

向DOM添加材料足够简单

<script>
function addStuffToTheDOM(s1, s2){
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    s2.innerHTML = "";

    if (s1.value==="job_1"){ 


    s2.insertAdjacentHTML('afterend', '<p><select name=&#34;scholarship&#34; id=&#34;scholarship&#34;><option value=&#34;&#34; disabled=&#34;disabled&#34; selected=&#34;selected&#34;>*Position</option> <option value=&#34;&#34; disabled=&#34;disabled&#34; > </option> <option value=&#34;HR&#34;>HR</option> <option value=&#34;CTO&#34;>CTO</option> <option value=&#34;test&#34;>test</option> <option value=&#34;test2&#34;>test2</option> <option value=&#34;test3&#34;>test3</option> <option value=&#34;test4&#34;>test4</option> </select> </p> <select name=&#34;previous_experience&#34; class=&#34;hidden&#34; 
id=&#34;new_to_demo&#34;><option value=&#34;0&#34; disabled=&#34;disabled&#34; selected=&#34;selected&#34;></option> <p> <p> <input type=&#34;text&#34; name=&#34;supervisor&#34; id=&#34;supervisor&#34; maxlength=&#34;50&#34; size=&#34;30&#34;> <label for=&#34;supervisor&#34;>*Supervisor</label> </p> <p> <input type=&#34;text&#34; name=&#34;office_location&#34; id=&#34;office_location&#34; maxlength=&#34;50&#34; size=&#34;30&#34;> <label for=&#34;office_location&#34;>Office location</label> </p> <p> <input type=&#34;text&#34; name=&#34;programme_start_date&#34; id=&#34;programme_start_date&#34; maxlength=&#34;50&#34; size=&#34;30&#34;> <label for=&#34;programme_start_date&#34;>programme_start_date</label> </p>');
    }
}
</script> 

<!-- .... -->

<form>
<!-- ... -->

<select name="type" id="type" onchange="addStuffToTheDOM(this.id, 'alma_mater')">
                    <option value="" disabled="disabled" selected="selected">*Job Interest?</option>
                    <option value="" disabled="disabled" >                  </option>
                    <option value="job_1">The really big job</option>
                    <option value="job_2">The other job</option>

                </select> 

而且，尽管这种插入本身可能更好（而不是将巨大的字符串塞入insertAdjacentHTML（）），但存在一个直接的问题，即

1. 如果用户犯了一个错误并选择了另一个选项（所有插入的HTML都不相关），则必须运行一些其他代码来删除所有这些新元素。 uck
2. 如果没有此删除过程，则如果用户选择另一个选项，然后返回并再次选择选项“ job_1”，则该表单将立即由于所有内容的重复而被破坏。 kes。
3. 后端检查必须格外小心，以进行正确的检查：输入是否为空是因为尚未填写，还是因为它们根本不存在？

实现此动态内容的理想方法是什么？

Answer 1

是的，那有令人担忧的气味。 您可以创建一个检查功能，该功能每次有人单击/键入（取决于您要在表单中包括的内容）字段时运行。 该功能本身需要某些条件，将要检查。

这是我整理的一个简单示例。 使用jQuery（如果需要，也可以使用常规javascript），然后将类似的内容放在一起。 希望这可以帮助！

 $(document).ready(function(){ $('#checkbox').click(function(){ if($("#checkbox").is(':checked')) $("#textbox").hide(); else $("#textbox").show(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form> <input id="checkbox" type="checkbox">I want to hide a textbox</input><br> <input id="textbox" type="textbox" placeholder="This can be hidden"></input> </form> 

编辑：要添加，如果要检查文本框值或textareas，则在jQuery中使用，例如：

$('#textbox').val();