I am attempting to grab a child element of HTML loaded dynamically via AJAX. It is not working.
$.get('test.html', function(data) {
var content = $('#content', data).html();
console.log(content); // Logs "Null"
$('#result').html(content);
});
Here is the 'test.html'
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8" />
<title>Website</title>
<meta name="description" content="" />
<meta name="keywords" value="" />
</head>
<body>
<h1>Hello!!!</h1>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat tincidunt tortor eu iaculis. Sed id urna sem, quis malesuada lacus. Nulla iaculis malesuada libero, id vehicula sapien imperdiet eu.</div>
</body>
</html>
Also, if I try this: console.log($(data));
, Firebug gives me this:
[<TextNode textContent="\n\n\n ">, meta, <TextNode textContent="\n ">, title, <TextNode textContent="\n ">, meta, <TextNode textContent="\n ">, meta, <TextNode textContent="\n\n\n \n ">, h1, <TextNode textContent="\n \n ">, div#content, <TextNode textContent="\n\n\n\n">]
Any ideas???
You made a mistake with the content var i believe, it doesnt make sense.
$.get('test.html #content', function(data) {
console.log(data); // Logs "Null"
$('#result').html(data);
});
thats how jquery website would say to do it.
I say use
$('#result').load('test.html #content');
hows that for ya?
try using $.ajax instead:
$.ajax({
url:'test.html',
dataType:'html',
success:function(data) {
var content = $('#content', data).html();
console.log(content); // Logs "Null"
$('#result').html(content);
}
});
I'm not quite clear on what you're trying to do, but I'm assuming you want to get the contents of #content
in your test.html
page and inject that into your #results
div.
$.get('test.html', function(data) {
var content = $(data).find("#content").html();
$('#result').html(content);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.