如何使用 AJAX 将 DIV 内容替换为其他内容答案

【问题标题】：How can I Replace DIV Content with another content using AJAX如何使用 AJAX 将 DIV 内容替换为其他内容
【发布时间】：2016-03-03 08:58:04
【问题描述】：

请对 AJAX/JQuery 完全陌生，但我在我的 Web 应用程序中非常需要它。我正在尝试用新内容替换 DIV。

以我有这个DIV为例

<div id="container">Container Contents</div>

我想用完全来自我的提交表单的新内容替换内容“容器内容”。这样当用户点击提交时，表单的结果将加载到 DIV 中并替换现有内容，并且应该有一种加载动画来显示后台正在发生的事情。

抱歉，我没有在代码中提供详细信息，就像我说的 AJAX/JQUERY 新手一样。谢谢！！！

【问题讨论】：

Change content of div - jQuery的可能重复
谷歌它，尝试一些东西 - 如果你尝试过的东西不起作用，然后问一个问题。

标签： jquery ajax

【解决方案1】：

我猜你正在寻找这样的东西：

<script>
$( "yourDiv" ).html( "<b>Wow!</b> Such excitement..." );
$( "yourDiv b" )
  .append( document.createTextNode( "!!!" ) )
  .css( "color", "red" );
</script>

在 jquery 文档的底部，您将找到有关它的更多信息： jQuery Doc.

我不知道你想用 AJAX 做什么，你得到的是 JSON 吗？如果是，您可以将其字符串化并附加它。

仅供参考：Vanilla JS（纯 javascript）中的对应部分会以这样的开头：

element.innerHTML = 'new content';

您也可以查看这个问题：Javascript: How to create new div dynamically, change it, move it, modify it in every way possible? 接受的答案显示了很多很好的信息。

问候，Megajin

【讨论】：

【解决方案2】：

使用 JQuery，您可以使用 .remove() 和 .append() 函数。

试试这样的：

$('#formId').on('submit', function (e) {
    e.preventDefault();

    $.ajax({
        url: '/route',
        method: 'post',
        data: $(this).serialize(),

        success: function() {
            $('#elementYouWantRemove').remove();
            $('#whereYouWantAddNewContent').append('<p> New content </p>')
        }
    })
});

【讨论】：

【解决方案3】：

如果你想给它一个 HTML 内容或文本内容，我建议你使用这样的东西：

$("#YourDivIdOrName").html(your content as a string);

但如果您想从另一个页面加载内容，我建议您使用类似这样的内容：

$("#YourDivIdOrName").load("Your content page url");

【讨论】：