I want print Hello World. but it doesn't work. Why? The problem is in line 30, how can I change this line for print "Hello World." by class "example"? I already tryed var x = y.getElementsByClassName("example"); and var x = variavelhtttp.responseXML.getElementsByClassName("example"); but without success.
index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Load page</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
if(window.XMLHttpRequest){
variavelhtttp = new XMLHttpRequest();
}else{
alert("Withouth Ajax!");
}
</script>
</head>
<body>
<button type="button" onclick="loadDoc()">Go</button>
<script type="text/javascript">
function loadDoc(){
variavelhtttp= new XMLHttpRequest();
variavelhtttp.open("GET","text.html",false);
variavelhtttp.send();
var y = variavelhtttp.responseText;
window.alert(y);
var x = $( ".example" ).html(y);
alert(x);
}
</script>
</body>
</html>
text.html
<html>
<head>
<title></title>
</head>
<body>
<div class="example">Hello World.</div>
</body>
</html>
$( ".example" ).html(y) SETS value y inside .example
and var x = $( ".example" ).html(y); will make x an object, as you can see with alert(x);
The alert you wanted:
alert( $( ".example" ).html() );
OR
alert( $( ".example" ).text() );
@snoopy, if you want to access to the inner text of the div.example retrieved from an axaj call, you have to parse it properly. First of all, if you're using jQuery it doesn't make sense at all to use vanillaJS here. Second, your HTTPRequest isn't an ajax call because you're using it on sync mode (instead of async mode, from which the A on AJAX stands for).
Here's an example using load and filters.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Load page</title>
</head>
<body>
<button type="button">Go</button>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$('button').click(loadDoc);
function loadDoc(){
//use a DOM element created by jQuery to hold the response!
var container = $('<div>');
//.load allows you to filter the text using a CSS selector
container.load("text.html .example", null, print);
//uses the complete handler to execute code after ajax done
function print(){
var example = $('.example', container);
alert(example.text());
//you can ommit this line if you don't want to append in the real DOM
$('body').append( example );
}
}
</script>
</body>
</html>
Live example https://plnkr.co/edit/4yniGzRVjFDNXY9b4Hds?p=preview
Live example using HTML and vanillaJS only: https://plnkr.co/edit/0S7XJ8xVFa43wWNw8Xtg?p=preview