CODEWITHSUNDEEP
javascriptjqueryhtmlxmlhttprequest
Rachel Dockter
Rachel Dockter

Reputation: 986

How to get specific div content from another website

I want to get a websites table contents from their site to my site. I'm getting the innerHTML by the following function:

function httpGet(theUrl)
{
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            createDiv(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", theUrl, false );
    xmlhttp.send();    
}


document.write(httpGet("https://cors.io/?http://crystalmathlabs.com/tracker-rs3/currenttop.php"));

function createDiv(responsetext)
{
    var _body = document.getElementsByTagName('body')[0];
    var _div = document.createElement('div');
    _div.innerHTML = responsetext;
    _body.appendChild(_div);
}

So this basically copies the site page without all the styling and images and stuff which is fine, but I want to reduce it to just the tables using a specific class name. I was thinking of a couple of ways to do this...

  1. Doing something to the URL to block out all the elements except the tables I want, I'm not even sure if this is possible.

  2. Filtering out everything from the response text. It returns a string so I think I would need some major string manipulation to do this.

  3. Make a temporary div so I can manipulate everything through jQuery and JS which is a bit of a hacky way but i think it will work.

What would be the best way to do this? Or maybe an idea I haven't mentioned yet.

Upvotes: 0

Views: 2412

Answers (2)

Muhammad Omer Aslam
Muhammad Omer Aslam

Reputation: 23738

You can use the DocumentFragment function createDocumentFragment.

Add all the HTML you received to the documentFragment and then select the desired HTML elements just like you would select from the document, using doucument.querySelector() for fragment you use fragment.querySelector()

DocumentFragments allow developers to place child elements onto an arbitrary node-like parent, allowing for node-like interactions without a true root node. Doing so allows developers to produce structure without doing so within the visible DOM -- an increase of speed is the true advantage.

I would start from the HTML received and use a dummy HTML and select table.my-class and add to a custom div you can modify it according to your needs.

var html = `<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<table class="my-class">
<tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  </table>
</body>
</html>`;

$(function() {
  let fragment = document.createDocumentFragment();
  let temp = document.createElement('div');
  temp.innerHTML = html;
  fragment.appendChild(temp);
  var table = fragment.querySelector('table.my-class');
  document.querySelector('.preview').append(table);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preview">
</div>

Upvotes: 1

surreal_sai
surreal_sai

Reputation: 101

Not sure if your use case can accomodate server side code but a very nice Node package which can solve this scenario is x-ray.

By doing this on server-side you avoid CORS issues and by using Node as your server, you still will be writing everything in JS.

x-ray also gives you a very nice option like jquery to point the exact html node you want to capture from the response HTML.

Check here for details:x-ray

Upvotes: 1

Related Questions