how to create a bootstrap card using jquery/javascript?-CodePudding

I have a card created and defined in HTML. I want to get rid of it in the HTML and therefore create the same card using jquery/javascript, that way a new one can be created on the click of a button.

<div id="divEntryPanel" class ="col-sm-6" style="display:none">
   <div class="card aircat-card-border">
      <div class="card-header bg-info">
         <h5 style="font-weight: bold">Additional Entry</h5>
      </div>
      <div id="pnlEntry" class="bg-secondary">
         <div class="pt-2 form-group">
            <asp:Label CssClass="row pl-3" runat="server" Text="Intended Action: "></asp:Label> 
             <textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea1" runat="server" cols="50" rows="2" maxlength="2000"></textarea>
             <asp:Label CssClass="row pl-3" runat="server" Text="Intended completion date: "></asp:Label>
             <textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea2" runat="server" cols="50" rows="2" maxlength="2000"></textarea>
             <asp:Label CssClass="row pl-3" runat="server" Text="extra details: ">
               <asp:Label CssClass="text-dark small" runat="server" Text="(200 Character Limit )"></asp:Label>
             </asp:Label>
             <textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea3" runat="server" cols="50" rows="2" maxlength="200"></textarea>
             <div id="EntrySaveBtn" class="col-md-12 float-right">
               <asp:Label runat="server" Text="Click to save the entry to this alert:"></asp:Label> 
               <a id="btnSaveEntry" class="btn btn-success btn-sm ml-2">Save</a>
             </div>
           </div>
        </div>
    </div>
</div>

CodePudding user response：

Something like this should work. In your HTML:

<div id="divEntryPanel" class ="col-sm-6" style="display:none">
  
</div> 

<button id="myBtn">Click me</button>

In your javascript

const card = `
  <div >
        <div >
            <h5 style="font-weight: bold">Additional Entry</h5>
        </div>
    <div id="pnlEntry" >
    <div >

<asp:Label CssClass="row pl-3" runat="server" Text="Intended Action: "></asp:Label> 
<textarea  style="width: 100%;"  id="Textarea1" 
runat="server" cols="50" rows="2" maxlength="2000"></textarea>

<asp:Label CssClass="row pl-3" runat="server" Text="Intended completion date: "></asp:Label>
<textarea  style="width: 100%;"  id="Textarea2" 
runat="server" cols="50" rows="2" maxlength="2000"></textarea>

<asp:Label CssClass="row pl-3" runat="server" Text="extra details: ">
<asp:Label CssClass="text-dark small" runat="server" Text="(200 Character Limit )"> 
</asp:Label></asp:Label>
<textarea  style="width: 100%;"  id="Textarea3" 
 runat="server" cols="50" rows="2" maxlength="200"></textarea>
                                
<div id="EntrySaveBtn" >
    <asp:Label runat="server" Text="Click to save the entry to this alert:"></asp:Label> 
    <a id="btnSaveEntry" >Save</a>
</div>

</div>
</div>
</div>
`

const button = document.getElementById("myBtn")

const mainDiv = document.getElementById("divEntryPanel")

button.onclick = function () {
 mainDiv.innerHTML  = card
}