使用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。