I'm trying to append an external html content (div plus some text inside just for testing) this way:
$.get("banner.html", function(data){
$(this).children("div:first").append(data);
});
That seems to be pretty simple... but it does not seem to work. Any idea? Thanks!
This question is related to
jquery
i'm not sure what you're expecting this to refer to in your example.. here's an alternative method:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.get("banner.html", function (data) {
$("#appendToThis").append(data);
});
});
</script>
</head>
<body>
<div id="appendToThis"></div>
</body>
</html>
Use selectors like CSS3
$("banner.html>div:first-child").append(data);
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.get("banner.html", function (data) {
$("#appendToThis").append(data);
});
});
</script>
</head>
<body>
<div id="appendToThis"></div>
</body>
</html>
You can use jquery's load function here.
$("#your_element_id").load("file_name.html");
If you need more info, here is the link.
Source: Stackoverflow.com