如何在JavaScript的帮助下添加和删除HTML代码块？

我是JavaScript新手，我正在通过开发一个应用程序来学习编码，在这个应用程序中，我需要根据用户的请求在JavaScript的帮助下调用HTML代码块。为了解释更多，如果用户点击任务，代表任务的HTML代码块将出现，用户可以多次调用它，用户也可以关闭它。我已经写了一些代码，它工作得非常好。我的问题是未来的发展，如果我想做数据库连接，我会怎么做？在我编写的代码中，我已经将HTML代码传递到JavaScript中，但我不想这样做。我想在somefile.HTML中编写HTML代码，每次用户单击任务时，somefile.js都会一次又一次地重复相同的HTML代码。也可以根据用户请求删除它

somefile.js

$(document).ready(function() {
    var max_fields = 10;
    var wrapper = $(".container1");
    var add_button = $(".add-task");

    var task = 1;
    $(add_button).click(function(e) {
        e.preventDefault();
        if (task < max_fields) {
            task++;
            $(wrapper).append('<div id="style" id="taskjs[]"><a id="close" class="delete-task"><i class="fa fa-times-circle-o fa-lg" aria-hidden="true"></i></a><br><div id="taskbugsdescription"><div id="innertaskbugsdescription"><div id="taskstyle"><i class="fa fa-tasks fa-lg task" aria-hidden="true"></i><input placeholder="Task Name*" type="text" id="lname" name="lname" required><br><textarea placeholder="Description*" id="w3review" name="w3review" rows="3" cols="50" required></textarea></div><div id="deaddate"><h3>Deadline date</h3><input type="date" id="birthday" name="birthday" required></div></div><div id="mention"><i class="fa fa-user fa-lg assignto" aria-hidden="true"></i><input placeholder="@Assign to*" type="text" id="lname" name="lname" required><br><br><i class="fa fa-envelope fa-lg message" aria-hidden="true"></i><textarea placeholder="Message" id="w3review" name="w3review" rows="2" cols="20"></textarea></div></div></div>');
        } else {
            alert('You Reached the limits')
        }
    });

    $(wrapper).on("click", ".delete-task", function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        task--;
    })
});

$（文档）.ready（函数（）{
var max_字段=10；
变量包装器=$（“.container1”）；
var add_按钮=$（“.add task”）；
var任务=1；
$（添加按钮）。单击（功能（e）{
e、 预防默认值（）；
如果（任务<最大字段）{
任务++；
$（包装器）。追加（“

截止日期

”）；
}否则{
警报（“您已达到极限”）
}
});
$（包装器）。在（“单击”，“删除任务”，函数（e）{
e、 预防默认值（）；
$（this.parent（'div'）.remove（）；
任务--；
})
});

somefile.html

<a class="add-task"><i class="fa fa-tasks task fa-lg" aria-hidden="true"></i> Task</a>

<div class="container1">
    <!--When use click on TASK The HTML code written in JavaScript file will be displayed here-->
</div>

任务

---

我的问题是如何编写代码，如果将来我想进行数据库连接，我可以轻松实现它？或者如何使用我的代码连接数据库（因为我的HTML代码在JavaScript文件中）。

您需要选择一个服务器端堆栈。无论您选择平面文件“数据库”（由HTML文件组成）还是数据库服务器，都是如此。无法从浏览器写入文件

由于您对Javascript越来越熟悉，您可能希望选择node.js，这是服务器端Javascript