下面是我想要实现的目标，抱歉，我是Javascript的新手

Question

对不起，我对javascirpt并不熟悉，因为我一直试图在所附的图像上实现这个结果。请提供适用的解决方案。

以下是我想要达到的目标

以下是我的HTML代码：

<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">Connecting to God of Elijah</h5>
                  <p class="card-text text-center">Come and experience worship, word encounter, salvation, prayers, deliverance & prophetic declaration.</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>
            </div>

这是我的Javascript代码

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

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

}

如何将结果mTitle、mDescirption、mLink从javascript填充到HTML页面？

Answer 1

实现这一目标的最佳方法是在for循环中创建元素，并将它们添加到容纳所有卡片的容器中。过程是: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>

​

Answer 2

​

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>

​