How to use Fetch API and append correctly

This is my html

<!DOCTYPE html>
<html lang="en">
<body>
       <div id='data'></div>
</body>
</html>

JavaScript
​x
 
<!DOCTYPE html>
<html lang="en">
<body>
       <div id='data'></div>
</body>
</html>
​

This is example html i want to fetch

<html amp="" lang="en">
<head>..........</head>
<body>
    <header amp-fx="float-in-top">
        <div class="head-container"></div>
        <div id="lang-list" hidden="" amp-fx="float-in-top"></div>
        <main class="container">
            <article class="post no-sidebar">
                <div class="m-card single-page">.........</div>
            </article>
            <div class="clear"></div>
        </main>
        <footer role="contentinfo" class="site-footer no-padding--important">
            <div class="container"></div>
        </footer>
        </div>
    </header>
</body>
</html>

JavaScript
 
<html amp="" lang="en">
<head>..........</head>
<body>
    <header amp-fx="float-in-top">
        <div class="head-container"></div>
        <div id="lang-list" hidden="" amp-fx="float-in-top"></div>
        <main class="container">
            <article class="post no-sidebar">
                <div class="m-card single-page">.........</div>
            </article>
            <div class="clear"></div>
        </main>
        <footer role="contentinfo" class="site-footer no-padding--important">
            <div class="container"></div>
        </footer>
        </div>
    </header>
</body>
</html>
​

This is code i know how to fetch and append whole html to my id=’data’

const url = `https://www.example.com/`;
let response = fetch(url);
fetch(url)
    .then(response => response.text())
    .then(html => {document.getElementById('data').append(html)});
.catch((err) => console.log("Can’t access " + url + " response. Blocked by browser?" + err));

JavaScript
 
const url = `https://www.example.com/`;
let response = fetch(url);
fetch(url)
    .then(response => response.text())
    .then(html => {document.getElementById('data').append(html)});
.catch((err) => console.log("Can’t access " + url + " response. Blocked by browser?" + err));
​

but i don’t want to append whole html but i only want to get class=”m-card single-page” of example.com and append to my id=’data’. I don’t know how to, please advice me, thanks you

Answer

As an approach several things could be used here:

DOMParser https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
querySelector (to get some DOM element by selector) https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector
outerHTML (to get HTML string from a DOM element you need) https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML Please check the example with the part which getting some parts from HTML string (https://codepen.io/alekskorovin/pen/gOGpBVL):

const someHTML = '<main><h1>Some HTML with</h1> <div class="m-card single-page">Lorem dolorem</div></main>';
const parser = new DOMParser();
const parsedHTML = parser.parseFromString(someHTML, "text/html");
const partOfHTMLDOM = parsedHTML.querySelector('.m-card.single-page');
const partOfHTMLDOMString = partOfHTMLDOM.outerHTML;
console.log({parsedHTML, partOfHTMLDOM, partOfHTMLDOMString});

JavaScript
 
const someHTML = '<main><h1>Some HTML with</h1> <div class="m-card single-page">Lorem dolorem</div></main>';
const parser = new DOMParser();
const parsedHTML = parser.parseFromString(someHTML, "text/html");
const partOfHTMLDOM = parsedHTML.querySelector('.m-card.single-page');
const partOfHTMLDOMString = partOfHTMLDOM.outerHTML;
console.log({parsedHTML, partOfHTMLDOM, partOfHTMLDOMString});

Advertisement

Answer