Tengo una tarjeta creada y definida en HTML. Quiero deshacerme de él en el HTML y, por lo tanto, crear la misma tarjeta usando jquery/javascript, de esa manera se puede crear una nueva con solo hacer clic en un botón.
<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>Algo como esto debería funcionar. En tu HTML:
<div id="divEntryPanel" class ="col-sm-6" style="display:none"> </div> <button id="myBtn">Click me</button>en tu 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 }