Convert jQuery code to native Javascript

Question

if I would convert my jQuery code into Javascript version. I've two pages: page.html and side.html The page.html take the div id and content from side.html document. It works very fine, but I prefer don't use jQuery for my project. How I can modify my code to native Javascript?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
 <head>
  <title>Useless</title>
  <script type='text/javascript' src='jquery-3.1.1.min.js'></script>
 </head>
 <body>
   Hello
   <script type="text/javascript">
      jQuery.ajax({
              url: "side.html",
              success: function(result) {
                var html = jQuery('<div>').html(result);
                  alert(html.find("div#a").attr("id"));
                  alert(html.find("div#a").html());
                  alert(html.find("div#b").attr("id"));
                  alert(html.find("div#b").html());
             },
         }); 
  </script>
 </body>
</html>

I write this code, but it doesn't work :(

var html = new XMLHttpRequest();
 html.open("POST","side.html", true);
 success: function(result) {
 var html = ('<div>').html(result);
  alert(html.find("div#a").attr("id"));
  alert(html.find("div#a").html());
  alert(html.find("div#b").attr("id"));
  alert(html.find("div#b").html());
}

jQuery is written in JavaScript. I think what you mean is you want to rewrite your code using only vanilla JavaScript. — gyre
– gyre, Commented Mar 15, 2017 at 22:49
Just take a look at the jquery .ajax and remove the code you don't want to use. — Jules
– Jules, Commented Mar 15, 2017 at 22:51
Did you try reading the documentation for XMLHttpRequest? Also see the fetch() API, which is much nicer. — SLaks
– SLaks, Commented Mar 15, 2017 at 23:18

2 revs user1106925 · Accepted Answer · 2017-03-15 23:17:24Z

3

From your attempt, it seems you may be thinking that the jQuery and native API's are nearly identical. They're not, so quite a few more changes are needed.

Note the comments in the code below. Also note that I removed the alert calls and used console.log instead, so be sure to open the developer console.

// Create and open the XHR object
var xhr = new XMLHttpRequest();
xhr.open("POST","side.html", true);

// Attach an event handler that fires when the requested content has loaded
xhr.addEventListener("load", function(result) {
  var d = document.createElement('div'); // Create a new element
  d.innerHTML = xhr.responseText;        // Add the response text

  var a = d.querySelector("#a"); // Fetch the `a` element
  var b = d.querySelector("#b"); // Fetch the `b` element

  console.log(a.id, a.innerHTML); // Display the id and content of each
  console.log(b.id, b.innerHTML);
});

xhr.send();

It's pretty common to have a small collection of utilities to reduce redundant code. There's not much needed here, but in general it's not a bad idea to have functions to shorten the DOM selection and creation methods a little.

edited Mar 15, 2017 at 23:17

community wiki

2 revs
user1106925

Sign up to request clarification or add additional context in comments.

2 Comments

Herelo Over a year ago

Thanks. But the developer console is empty

user1106925 Over a year ago

@Herelo: I forgot to add xhr.send() at the end.

Collectives™ on Stack Overflow

Convert jQuery code to native Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related