jquery 简单的 ajax 加载而不加载其包装器 DIV

Question

我在外部文件 (test.html) 中有一个内容 (#content)，可以加载到位于 index.html 的另一个 DIV (#result) 中:

test.html:

<div id="content">This text should not be loaded with its DIV. <strong> May contain other tags</strong></div>

jquery:

$('#result').load('test.html #content');

index.html 结果，意外:

<div id="result"><div id="content">This text should not be loaded with its DIV. <strong> May contain other tags</strong></div></div>

index.html 结果，预期:

<div id="result">This text should not be loaded with its DIV. <strong> May contain other tags</strong></div>

如何仅加载 #content 的实际内容/HTML，其中可能还包含其他标签，但仅加载其包装 DIV (#content)？原因只是为了避免不需要的 div，这些 div 也可能会错误地与其他样式的 DIV 发生冲突。

非常感谢任何提示。谢谢

Answer 1

这是一个想法。如果您使用临时标签作为工作区怎么办？

这个 jQuery javascript...

$('#workarea').load('test.html #content');

...可能会产生这个结果。请注意，工作区已隐藏:

<div id="result"></div>
<div id="workarea" style="display: none"><div id="content>This text should not be loaded with its DIV</div></div>

然后，您可以使用以下命令将其移动到结果...

$('#result').html($('#workarea').html());

它应该产生这个结果。

<div id="result">This text should not be loaded with its DIV</div>
<div id="workarea" style="display: none"><div id="content></div></div>

编辑:

以下是完整的脚本:

$('#workarea').load('test.html #content');
$('#result').html($('#workarea').html());

您可以使用这两行而不是一行。如果我理解正确，它应该在上面的查询中产生预期的结果。