Javascript 使用jQuery更新DOM元素

我正在寻找一种方法来更新我正在制作的网页，作为一个报告，供几个不同的人来回传递。我正在使用表单接收几段数据，我想知道如何才能使其立即将内容添加到正确标题下的div中。我目前正在使用jquery和append，它看起来像是添加了所需的输入，然后立即将其删除。我试过使用。live也一样，但它根本没有出现。有没有一种方法可以让表单输入在不提交到其他页面的情况下发布到页面

以下是我到目前为止的代码，仅测试将成为问题标题的元素：

<div class="IssueDiv">

</div>

<form id="newIssue">
    <fieldset>
        <legend>Add a new important issue:</legend>
        <input type="text" id="issue" placeholder="Issue Summary...">
        <input type="text" id="issue-client" placeholder="Client...">
        <input class="ticket" type="text" id="issueParent" placeholder="Parent ticket..."><br>
        <textarea placeholder="Issue details..."></textarea><br>
        <button id="addIssue">Add Issue</button>
    </fieldset>
</form>

添加一个新的重要问题：




添加问题

以及jquery：

<script>
    $(function(){
        $("#addIssue").click(function() {
            var $issue = $("#issue").val();
            var $issueSum = $("<h3></h3>").text($issue);
            $(".IssueDiv").append($issueSum);
        });
    });
</script>

$（函数（）{
$（“#添加”）。单击（函数（）{
var$issue=$（“#issue”）.val（）；
var$issueSum=$（“”）。text（$issue）；
美元（“.IssueDiv”）。追加（$issueSum）；
});
});

编辑：我正在研究如何使用AJAX，但我不确定如何使所有输入数据都能持久化。我基本上希望制作一份网页式的报告，允许我和我的团队更新报告中的条目，他们将保留在报告中，直到我们能够通过删除封装个别问题的div将其删除

---

我还希望能够在这里单独设置各个部分的格式，因此，例如，我可以添加一个复选框，表示问题紧急，并将这些部分的标题设置为红色。有什么最简单的方法可以让数据持久化，可以添加到新的（div/h/p）元素中，并显示在主网页上，同时还允许我更新格式？

您的代码似乎会添加文本，然后立即删除，因为您的表单会被发布，页面会重新加载，有效地将页面重置为其初始状态

如果您只想将文本添加到页面，而不发布表单或执行任何服务器端处理，则可以使用jQuery命令阻止表单发布。请注意，我在表单本身上创建了一个

submit

侦听器，而不是在submit按钮上单击

侦听器

$（“#新问题”）。关于（'submit'，函数（e）{
e、 预防默认值（）；
...
});


$（函数（）{
$（“#新问题”）。关于（'submit'，函数（e）{
e、 预防默认值（）；
var$issue=$（“#issue”）.val（）；
var$issueSum=$（“”）。text（$issue）；
美元（“.IssueDiv”）。追加（$issueSum）；
});
});

添加一个新的重要问题：




添加问题
是否只想将文本添加到页面？不需要张贴表格？只是一个提示，它只会在本地浏览器中向页面添加文本。其他计算机上的其他人不会看到文本更改。这就是你想要的吗？不要使用
.live
，因为它在JQ的更高版本中已被弃用和删除。而是执行类似于
$（document）.on（'click'，mySelector，function）的操作我真的只需要将文本添加到页面中，还需要将其持久化。无需进行验证，因为我将监控报告，并且报告只提供给少数同事。我所在的团队负责报告我们公司的各种问题，目前我们只是在一封电子邮件中添加/删除大量文本模板中的数据，这证明不太理想。感谢您的回复并指出这一点。我将主要在一台计算机上更新报告，但我肯定需要使用AJAX才能共享它。我将有这种形式的多个不同实例：不同输入的问题的不同级别，等等。所以我可以只使用一个脚本文件吗？我肯定会设计系统使用单个服务器端脚本文件，但这取决于您需要的功能。如果您在编辑问题时更详细地介绍了您的需求（或开始一个新问题），我们可能能够探索更具体的解决方案。