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>
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 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>
`
const button = document.getElementById("myBtn")
const mainDiv = document.getElementById("divEntryPanel")
button.onclick = function () {
mainDiv.innerHTML += card
}