Question

这是一个非常简单的问题，但我没有通过搜索找到答案。

创建SPA时，如果您使用jQuery进行更新，那么更新内容的过程是什么？它只是删除节点的内容，并编写新的HTML？

以下是一些使问题更清晰的代码：

假设你有这样的SPA页面：

<div id='nav'>
  <div class='link'>home</div>
  <div class='link'>about</div>
  ...
</div>

<div id='page_content'>
  ...
</div>

当用户点击导航项时，jQuery会为内容执行HTTP获取：var content = ...。要更新页面，只需使用$('#page_content').html( content )？

更新页面

Answer 1

取决于你;＆＃39;尝试做什么。您可以更改文本框的值，如：

$("#textBoxID").val("ValueYouWant");

您可以将表行添加到表中，如下所示：

$("#tableID").append("<tr<td>blahblah</td></tr>");

您可以更新div的HTML：

$("#divID").innerhtml("Hello World");

Etc等。你的问题很模糊，但我希望这会有所帮助。

Answer 2

如果是SPA，则表示单页解决方案，如下所示：

<!-- HTML -->
<div id = "page-area" style = "width: 800; height: 600; border: 1px solid silver"></div>

// Javascript
$('#page-area').load('your-page.html');

// or
$.get('your-page.html', function(data){
    $('#page-area').html(data);
});

...如果您想在不刷新页面的情况下加载外部文件。

或更新元素内容：

var pagecontent = "<h1>New Content</h1><p>Some new content</p>";

$('#page-area').html(pagecontent);

请注意，以这种方式添加到页面的元素将采用现有样式，并将与具有相同id属性的其他元素冲突。

如何使用jQuery更新单页应用程序中的DOM？

2 个答案: