Question

I have a content (#content) at external file (test.html) to load into another DIV (#result) at index.html:

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 result, unexpected:

<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 result, expected:

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

How do you load only the actual content/ HTML of the #content which may also contain other tags, but only without its wrapper DIV (#content)?
The reason is to simply avoid unneeded divities which also may conflict with other styled DIVs by mistake.

Any hint is very much appreciated. Thanks

Answer 1

Here’s a thought. What if you use a temporary tag as a workspace?

This jQuery javascript…

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

… might produce this result. Notice that the workarea is hidden:

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

Then, you could move it to the result with this…

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

It should produce this result.

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

Edit:

Here’s the complete script all in one place:

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

You would use these two lines instead of your one line. If I understand correctly, it should produce the expected result in the query above.