Is there anyway i can achieve the following by appending "div #B" from somewhere else like from another page or from somewhere in the body rather than writting it inside this script itself and not face same origin policy issues like when using JQuery's Load?

$('#A').append("<div id='B'><span><img src='i1.png'></span></div>");

Is there anyway i can achieve the following by appending "div #B" from somewhere else like from another page or from somewhere in the body rather than writting it inside this script itself and not face same origin policy issues like when using JQuery's Load?

$('#A').append("<div id='B'><span><img src='i1.png'></span></div>");

• javascript
• jquery
• html
• css
• jsonp

2 Answers 2

You can use this to append an element's HTML in your body

$('#A').append($('#someelement').html());

This won't work with cross origin iframes because of same-origin policy. But you can get the HTML from another page by using AJAX, as long as the URL is in the same origin.

I'm sorry but if you wish to append a div, you must be able to specify it's contents and styles.

If you want to extract it from a div on the page do this:

var loadAble = $('#YourDivName').html();
$('#A').append("<div class="B"></div>");
$('#A .B').html(loadAble);

Remember to replace YourDivName respectively!

I know you said not to use .load(), but here goes anyway:

$('#A').append("<div class="B"></div>");
$('#A .B').load("yourFileGoesHere.html#YourDivName");

An alternative (untested) is to write:

var B = $('#A').append("<div class="B"></div>");
B.load("yourFileGoesHere.html#YourDivName");