how can i extract a specific element from the html

Question

I am trying to extract an element from the html with the function that I have.

document.querySelector('#get_html').addEventListener('click', function () {
    var url = document.querySelector('#url_html');



    var request = new XMLHttpRequest();
    request.open("GET", url.value);
    request.send();

    request.onload = function() {
       console.log(request.response);
    };

})

I have an input where I put the url of a page and the function brings me the complete html of the page

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <div class="offer">
           <div class="card"></div>
           <div class="card"></div>
           <div class="card"></div>
           <div class="card"></div>
      </div>
    </body>
</html>

this is the html that it throws me, now what I want is to extract that div element with the offer class

developer.mozilla.org/en-US/docs/Web/API/DOMParser/…

epascarello
– epascarello

2022-07-06 16:43:47 +00:00
Commented Jul 6, 2022 at 16:43 — epascarello
– epascarello, Commented Jul 6, 2022 at 16:43

epascarello · Accepted Answer · 2022-07-06 16:46:16Z

2

You can use parseFromString to get the string from the response into a format you can query the DOM.

var responseText = `<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <div class="offer">
           <div class="card"></div>
           <div class="card"></div>
           <div class="card"></div>
           <div class="card"></div>
      </div>
    </body>
</html>`;

const parser = new DOMParser();
const doc = parser.parseFromString(responseText, "text/html");
console.log(doc.querySelector(".offer"));

answered Jul 6, 2022 at 16:46

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

Collectives™ on Stack Overflow

how can i extract a specific element from the html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related