Блог

Главная - Вопросы по программированию - Как правильно использовать Fetch API и добавлять

Как правильно использовать Fetch API и добавлять

#javascript #jquery

#javascript #jquery

Вопрос:

Это мой html

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

Это пример html, который я хочу получить

 <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>

Это код, который я знаю, как извлекать и добавлять весь html к моему 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));

но я не хочу добавлять весь html, а хочу только получить class=»m-card single-page» из example.com и добавьте к моему id=’data’. Я не знаю, как, пожалуйста, посоветуйте мне, спасибо

Ответ №1:

В качестве подхода здесь можно использовать несколько вещей:

 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});

Метки: