实现这一点的最佳方法是在for循环中创建元素，并将它们添加到包含所有卡片的容器中。2过程如下：1-创建一个变量来保存容器; 2-获取您的数据; 3-交互并将元素发送到负责创建卡的功能; 4-将此元素附加到容器。

function myCard(article) {
            return `
            <div class="card" style="width: 18rem;">
                <img src="${article.link}" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title text-center">${article.text}</h5>
                    <p class="card-text text-center">${article.description}</p>
                    <div class="row">
                    <div class="col-lg-12 text-center"><a href="#" class="btn btn-danger">WATCH SERMON</a></div>
                    <div class="col-lg-12 text-center pt-3">
                        <a href="#" ><img src="./img/film-solid.svg" width="10%" height="auto" class="p-1"/></a>
                        <a href="#" ><img src="./img/headphones-simple-solid.svg" width="10%" height="auto" class="p-1"/></a>
                        <a href="#" ><img src="./img/download-solid.svg" width="10%" height="auto" class="p-1"/></a>
                        <a href="#" ><img src="./img/book-solid.svg" width="10%" height="auto" class="p-1"/></a>
                    </div>
                    </div>
                </div>
            </div>
            `
        }

        (function mFeeds()
        {
            // This is the container that holds all cards
            const container = document.querySelector('#card-main-container')
            let headers = new Headers();

            headers.append('Content-Type', 'application/json');
            headers.append('Accept', 'application/json');

            headers.append('Access-Control-Allow-Origin', 'https://mfeeder.herokuapp.com/feed');
            headers.append('Access-Control-Allow-Credentials', 'true');

            var requestOptions = {
            method: 'GET',
            redirect: 'follow',
            headers: headers
            };

            fetch("https://mfeeder.herokuapp.com/feed", requestOptions)
            .then(response => response.text())
            .then(result => {
                let mResults = JSON.parse(result)
                //console.log(mResults)
                mResults.feeds.forEach(element => {
                    //console.log(element)
                    let parser = new DOMParser();
                    const theCard = parser.parseFromString(myCard(element), 'text/html');
                    container.appendChild(theCard.firstChild)
                });

                for (let i = 0; i < 7; i++) {
                    mTitle = mResults.feeds[i].text
                    mDescription = mResults.feeds[i].description
                    mLink = mResults.feeds[i].link

                    //console.log(mTitle, mDescription, mLink)
                }
                

            })
            .catch(error => console.log('error', error));

        })()

<div class="col p-5" id="card-main-container">
  </div>

function mFeeds() {
  let headers = new Headers();

  headers.append('Content-Type', 'application/json');
  headers.append('Accept', 'application/json');

  headers.append('Access-Control-Allow-Origin', 'https://mfeeder.herokuapp.com/feed');
  headers.append('Access-Control-Allow-Credentials', 'true');

  var requestOptions = {
    method: 'GET',
    redirect: 'follow',
    headers: headers
  };

  fetch("https://mfeeder.herokuapp.com/feed", requestOptions)
    .then(response => response.text())
    .then(result => {
      let mResults = JSON.parse(result)
      for (let i = 0; i < 7; i++) {
        mTitle = mResults.feeds[i].text
        mDescription = mResults.feeds[i].description
        mLink = mResults.feeds[i].link

        //console.log(mTitle, mDescription, mLink)
        document.getElementById("title").innerHTML = mTitle
        document.getElementById("description").innerHTML = mDescription
        document.getElementById("url-link").href = mLink
      }

    })
    .catch(error => console.log('error', error));

}
mFeeds()

<div class="col p-5">
        <div class="card" style="width: 18rem;">
          <img src="./img/connecting-to-go-of-elijah.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title text-center" id="title"></h5>
            <p class="card-text text-center" id="description">Come and experience worship, word encounter, salvation, prayers, deliverance & prophetic declaration.</p>
            <div class="row">
              <div class="col-lg-12 text-center"><a id="url-link" href="#" class="btn btn-danger">WATCH SERMON</a></div>
              <div class="col-lg-12 text-center pt-3">
                <a href="#"><img src="./img/film-solid.svg" width="10%" height="auto" class="p-1" /></a>
                <a href="#"><img src="./img/headphones-simple-solid.svg" width="10%" height="auto" class="p-1" /></a>
                <a href="#"><img src="./img/download-solid.svg" width="10%" height="auto" class="p-1" /></a>
                <a href="#"><img src="./img/book-solid.svg" width="10%" height="auto" class="p-1" /></a>
              </div>
            </div>
          </div>
        </div>
      </div>