在文档中的多个位置定位相同的DOM

Question

用户更改select元素后，JavaScript用于显示或隐藏表单中可用的输入。无论选择元素的值如何，都会显示/使用某些输入，而其他输入对于每个值都是唯一的。目前，我有一个处理所有场景的表单，然而，它变得越来越复杂，使用jQuery验证几乎是不可能的。

<form>
    <select name="type" id="type"><option value="1">Type 1</option><option value="2">Typ2 2</option></select>
    <select name="theme" id="theme"><option value="1">Theme 1</option><option value="2">Theme 2</option></select>
    <input type="text" name="name">
    <div id="type1">
        <input type="text" name="type1_1">
        <input type="text" name="type1_2">
        <input type="checkbox" name="type1_3">
    </div>
    <div id="type2">
        <input type="text" name="type2_1">
        <select name="type2_2"><option value="1">xxx 1</option><option value="2">xxx</option></select>
    </div>
    <div id="type3">
        <input type="text" name="type3_1">
        <select name="type3_2"><option value="1">xxx 1</option><option value="2">xxx</option></select>
        <input type="text" name="type3_3">
    </div>
    <div id="type4">
        <input type="text" name="type4_1">
        <input type="text" name="type4_2">
        <select name="type4_3"><option value="1">xxx 1</option><option value="2">xxx</option></select>
    </div>
    <button type="submit">Submit</button>
</form>

使用单个表单将简化部分，但是，我不希望在每种表单中复制HTML。

<form id="form1">
    <select name="type" id="type"><option value="1">Type 1</option><option value="2">Typ2 2</option></select>
    <select name="theme" id="theme"><option value="1">Theme 1</option><option value="2">Theme 2</option></select>
    <input type="text" name="name">
    <div id="type1">
        <input type="text" name="type1_1">
        <input type="text" name="type1_2">
        <input type="checkbox" name="type1_3">
    </div>
    <button type="submit">Submit</button>
</form>

<form id="form2">
    <select name="type" id="type"><option value="1">Type 1</option><option value="2">Typ2 2</option></select>
    <select name="theme" id="theme"><option value="1">Theme 1</option><option value="2">Theme 2</option></select>
    <input type="text" name="name">
    <div id="type2">
        <input type="text" name="type2_1">
        <select name="type2_2"><option value="1">xxx 1</option><option value="2">xxx</option></select>
    </div>
    <button type="submit">Submit</button>
</form>

<form id="form3">
    <select name="type" id="type"><option value="1">Type 1</option><option value="2">Typ2 2</option></select>
    <select name="theme" id="theme"><option value="1">Theme 1</option><option value="2">Theme 2</option></select>
    <input type="text" name="name">
    <div id="type3">
        <input type="text" name="type3_1">
        <select name="type3_2"><option value="1">xxx 1</option><option value="2">xxx</option></select>
        <input type="text" name="type3_3">
    </div>
    <button type="submit">Submit</button>
</form>

<form id="form4">
    <select name="type" id="type"><option value="1">Type 1</option><option value="2">Typ2 2</option></select>
    <select name="theme" id="theme"><option value="1">Theme 1</option><option value="2">Theme 2</option></select>
    <input type="text" name="name">
    <div id="type4">
        <input type="text" name="type4_1">
        <input type="text" name="type4_2">
        <select name="type4_3"><option value="1">xxx 1</option><option value="2">xxx</option></select>
    </div>
    <button type="submit">Submit</button>
</form>

一种选择是使用不包含公共输入的单个表单，然后在提交时使用JavaScript设置隐藏的输入。

另一种选择是在提交时使用JavaScript将与公共输入相关联的DOM移动到适用的表单中，但是，我担心如果在单个页面加载时使用各种表单，这样做可能会出错。

在沿着这条路走下去之前，是否可以使用JavaScript在同一个文档中显示相同的DOM多个位置？当我说＆＃34;相同＆＃34;时，我并不意味着它的克隆，但每个位置以某种方式引用相同的对象元素。这样做会允许每个单独的表单包含这些常见的＆＃34;引用＆＃34;输入元素？