Extracting Data Between 2 Tags In Javascript

I'm a js newbie. I'm trying to get a table from a really old and outdated webpage that is continually updated (locally) and add it to a different page. I need to extract table 1 f

Solution 1:

Typically you would give the target element a unique ID, and target it with document.getElementById('[target]'):

var element_1 = document.getElementById('one');
console.log(element_1);

<divid="one">This is table 1</div><table><tr><td><a></a></td></tr></table><divid="two">This is table 2</div><table><tr><td><a></a></td></tr></table>

If you don't have access to a unique ID in the HTML, but do have an applicable class, you can use document.getElementsByClassName('[target]'), which returns a collection of all elements with the desired class name:

var elements = document.getElementsByClassName('target');
console.log(elements[0]);
console.log(elements[1]);

<divclass="target">This is table 1</div><table><tr><td><a></a></td></tr></table><divclass="target">This is table 2</div><table><tr><td><a></a></td></tr></table>

If you don't have access to either a unique ID or but have access to jQuery, it's quite simple to tranverse the DOM with .find('div'), which returns an array of all the <div> nodes. From there you can simply specify the desired index:

var element_1 = $(document).find('div')[0];
var element_2 = $(document).find('div')[1];
console.log(element_1);
console.log(element_2);

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div>This is table 1</div><table><tr><td><a></a></td></tr></table><div>This is table 2</div><table><tr><td><a></a></td></tr></table>

Alternatively, with raw JavaScript, it is possibly to target elements with .childNodes (made easier with .firstElementChild). You still need to work from a 'unique' point, and in this case, you'll want to work from body, or even document itself.

Note that in this example, childNodes[5] pertains to the second <div>, as each 'node' is prefaced by a descriptor of that node. As such, childNodes[1] references the first <div>, childNodes[3] references the <table>, and childNodes[5] references the second <div>.

var element_1 = document.body.firstElementChild;
var element_2 = document.body.childNodes[5];
console.log(element_1);
console.log(element_2);

<div>This is table 1</div><table><tr><td><a></a></td></tr></table><div>This is table 2</div><table><tr><td><a></a></td></tr></table>

Hope this helps! :)

Solution 2:

Another shorter way is using DOMParser. DOMParser.parseFromString will parse your html code into DOMDocument object. DOMDocument object has body object. And in turn body has children. Your table1 is the 2nd child in that list .

letsource = "..." //your html text above
// method 1: use DOMParser
let dom = (new DOMParser()).parseFromString(source, 'text/html')
let table1 = dom.body.children[1]

Try this https://codepen.io/minht/pen/EXbgXY?editors=0010#0