使用jsp或Javascript生成HTML代码

Question

我的问题是，我正在尝试生成一些HTML代码以适合这一个GIANT形式。这个webapp将有12个字母，每周有10个文本框。我希望得到一些帮助，为每周的每一天生成HTML代码。而不必为每周的每一天的每个字母进行硬编码。会喜欢一些帮助。

我想如果我使用window.onload = function()，但我不知道如何在加载窗口时使用Javascript在HTML中生成一行。

TLDR;我怎么能得到jsp或JS复制粘贴这个HTML到一个网页12次每周的每一天与唯一的ID和名称。

<form> 
    <div id="sectionpart"> 
     <%--Monday #1 
     --%> 
     <h2>Monday Mail Piece #1</h2> 
     <div id ="formpart" > 
      <table border="0" cellspacing="3" cellpadding="3"> 
        <tr> 
         <td>A. FORM*: </td> 
         <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" name="FORM_M1" type="number" maxlength="1" id="FORM_M1" value="8" size="10" required/></td> 
        </tr>    
        <tr> 
         <td>B. ADDRESSEE*: </td> 
         <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="ADDRESSEE_M1" id="ADDRESSEE_M1" value="8" size="10" maxlength="1" required/></td> 
        </tr> 
        <tr> 
         <td>other field: </td> 
         <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="text" name="otherdB_M1" id="otherB_M1" value="banana" size="30" /></td> 
        </tr> 
        <tr> 
         <td>C. RETURN ENVELOPE*: </td> 
         <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="RETURN_ENVELOPE_M1" id="RETURN_ENVELOPE_M1" value="3" size="10" maxlength="1" required/></td> 
        </tr> 
        <tr> 
         <td>D. SENDER TYPE*: </td> 
         <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="SENDER_TYPE_M1" id="SENDER_TYPE_M1" value="10" size="10" maxlength="2" required/></td> 
        </tr> 
        <tr> 
         <td>other field: </td> 
         <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="text" name="otherD_M1" id="otherD_M1" value="" size="50" /></td> 
        </tr> 
        <tr> 
         <td>E. PURPOSE*: </td> 
         <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="PURPOSE_M1" id="PURPOSE_M1" value="10" size="10" maxlength="2" required/></td> 
        </tr> 
        <tr> 
         <td>other field: </td> 
         <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="text" name="otherE_M1" id="otherE_M1" value="" size="50" /></td> 
        </tr> 
        <tr> 
         <td>F. ADVERTISING*: </td> 
         <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="ADVERTISING_M1" id="ADVERTISING_M1" value="1" size="10" maxlength="1" required/></td> 
        </tr> 
        <tr> 
         <td>G. READING: </td> 
         <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="READING_M1" id="READING_M1" value="1" size="10" maxlength="1" /></td> 
        </tr> 
        <tr> 
         <td>H. REACTION: </td> 
         <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="REACTION_M1" ID="REACTION_M1" value="1" size="10" maxlength="1" /></td> 
        </tr> 
        <tr> 
         <td>I. RESPONSE: </td> 
         <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="RESPONSE_M1" ID="RESPONSE_M1" value="1" size="10" maxlength="1" /></td> 
        </tr> 
        <tr> 
         <td>Class: 01020304 </td> 
         <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="Classnums_M1" ID="Classnums_M1" value="01020304" size="10" maxlength="8" /></td> 
        </tr> 
        <tr> 
         <td>J. CLASS*: (OK to pick more than one)</td> 
         <td><ol type="1" > 
           <li><input type="checkbox" name="Presorted-PRSRT-FP" value="ON" />Presorted First-Class <b>or</b> PRSRT, <b>or</b> FP</li> 
           <li><input type="checkbox" name="FirstC-Postage" value="ON" />First-Class Postage</li> 
           <li><input type="checkbox" name="ForeverStamp" value="ON" />Forever Stamp</li> 
           <li><input type="checkbox" name="AUTO" value="ON" />AUTO</li> 
           <li><input type="checkbox" name="ABAFMBAV" value="ON" />AB, <b>or</b> AF, <b>or</b> MB, <b>or</b> AV</li> 
           <li><input type="checkbox" name="SinglePiece" value="ON" />Single Piece, <b>or</b> SNGLP, <b>or</b> SP</li> 
           <li><input type="checkbox" name="OutsideUS" value="ON" />Mail from outside the U.S.</li> 
           <li><input type="checkbox" name="FRANKED" value="ON" />Federal Government with Official Signature(FRANKED)</li> 
           <li><input type="checkbox" name="OtherFed" value="ON" />Other Federal Government Mail</li> 
           <li><input type="checkbox" name="OtherClassification" value="ON" />Other classification (Specify on Answer Booklet page 4) 
            <input onblur="undo(this.id);"onfocus="highlight(this.id);" type="text" name="otherJ_M1" ID="otherJ_M1"value="" size="50" maxlength="50"/></li> 
          </ol> 
         </td> 
        </tr> 
      </table> 
    </div> 
    <div id="imagepart"> 
     <img src="img/MailAustin.JPG" width="100%" height="675px" alt="MailAustin" ID="IMAGE_M1"/> 
    </div> 
    </div> 

    repeat 
    repeat 
    ...... 
    repeat 

</form> 

Answer 1

您可以使用纯JS获取一组html标记，克隆它们，然后将它们附加到DOM。你可以在你的onload函数执行是这样的：

var form = document.querySelector('#form'); 
var inject = doucment.querySelector('#injection-point'); 
for (var i = 0; i < 7; i++) { 
    var cln = form.cloneNode(true); 
    cln.setAttribute('id', 'form-' + i); 
    inject.appendChild(cln); 
} 

克隆节点... https://www.w3schools.com/jsref/met_node_clonenode.asp

此外，如果您可以自由使用的框架，聚合物JS提供了一些优秀的工具重复HTML而无需编写额外的JS。