How to Get a Div Element from an External Webpage in HTML File

How to access an element from an external HTML document?

You can fetch the html file as text, parse it, and run the querySelector

fetch("products.html").then(r=>r.text()).then((html)=>{ // get the content of products.html
  let element = document.createElement("html");
  element.innerHTML = html; // parse the html
  let p1 = element.querySelector("#p1");
});

Keep in mind that both documents have to be on the same origin (see: CORS), so you cannot use this for scraping third party websites

How can I show only one div id from an external html file inside a popup modal?

From the documentation example that you linked, you can do like:

$('.link').click(function(event) {
  event.preventDefault();
  target = $(this).data('target');
  $.get(this.href, function(html) {
    $(html).find(target).appendTo('body').modal();
  });
});

A better to have modal content wrapper in your body:

<div id="modal-content"></div>

Now, in jQuery, use this:

$('#modal-content').html($(content).find(target)).modal()
// html parameter renamed ^^ to content

I meant to use:

$('.link').click(function(event) {
  event.preventDefault();
  target = $(this).data('target');
  $.get(this.href, function(content) {
    $('#modal-content').html($(content).find(target)).modal()
  });
});

Accessing html elements from another page inside div

Assuming the pages are from the same domain, a similar question is addressed here.

However, if the page within the iframe is from a different domain, you won't be able to access individual elements - that's cross-site scripting, and it is a security vulnerability.

There are a few options if you own both pages, even if they are on separate domains:

You could add HTML links/bookmarks to the page within the iframe and then reload the iframe when the user clicks the menu option on your host page. If would require a reload of the page within the iframe, but it could be used to get similar behavior.
You could post messages to the iframe and handle "scroll requests" in the hosted page. You will want to be careful with validation of the source of those messages.

Load DIV tag from external file

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Include</title>
</head>
<body>
    <a href="#link1">Link1</a>
    <a href="#link2">Link2</a>
    <a href="#link3">Link3</a>
    <a href="#link4">Link4</a>


    <div id="include"></div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript"> 
        var includeDiv = $("#include");
        $(window).on('hashchange', function() {
            var href = location.hash.slice(1) +".html";
            includeDiv.load('include/' + href);
        });
    </script> 
</body>

How to get content of div ( from external url) without loading the whole website

you could do it using php aswell

<?php 
     $dom = new DOMDocument;
     libxml_use_internal_errors(true);  //hides errors from invalid tags
     $dom->loadHTMLFile('http://www.w3schools.com/php/default.asp');
     $DOMxpath = new DOMXPath($dom);
     $DivContent = $DOMxpath->query("//a[@class='menu_default']");
     var_dump($DivContent->item(0)->textContent);

Get DIV content from external Website

This is what I always use:

$url = 'https://somedomain.com/somesite/';
$content = file_get_contents($url);
$first_step = explode( '<div id="thediv">' , $content );
$second_step = explode("</div>" , $first_step[1] );

echo $second_step[0];