仅在Javascript中具有不同段落的Dynamic Div

问题描述：

我想在每个div内动态添加带有各自图标的段落.例如，如果服务返回30个项目，那么我将创建30个div class ="tile".如果服务返回1，则只会创建一个.

I want to dynamically add paragraphs with their respective icons inside each a div. For example, if the service returns 30 items, then I will create 30 div class ="tile" . If the service returns 1 then it will create just one.

<Body>
    <div class="contain">
        <div class="row">
            <div class="row__inner">
                <div class="tile">
                    <i id ="icon" class="fas fa-passport fa-2x"></i>
                    <p id="name" class="title-text ">UnitMainx </p>
                    <h2 id="id" class="unitdesc">x..45..322.2</h2>
                    <p class="small-text ">more</p>
                </div>
            </div>
        </div>
    </div>
</Body>

我想根据我的服务响应时间来创建其中之一.我觉得困难的部分是传递div内部服务中的值.

I would like to create one of this depending on the length of my service response. The part that I find difficult is to pass the values from the service inside the div.

<Script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "https://jsonplaceholder.typicode.com/comments",true);
    xhr.send();
    xhr.onreadystatechange = processRequest;
    function processRequest(e) {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var response = JSON.parse(xhr.responseText);
            response.forEach(myFunction);
            function myFunction(item, index) {
                document.getElementById("name").innerHTML +=item.name;
                document.getElementById("id").innerHTML += item.id; 
                document.getElementById("icon").innerHTML += if 
                    (item.name == "UnitMainx" ){ then add fa fa  icon };   
            }
        }
    }
</Script>

答

您可以从api响应中动态放置html create，完成后将其推回coantiner div

You can put your html create in dynamically from the api response and when you are done push it back to a coantiner div

请参阅此处，在HTML的html += ...时使用了`勾号，因为我想像模板一样使用它，然后可以使用api响应中带有循环变量${row.name}的值，依此类推

See here i used a ` tick as when html += ... for the html because I want to use it like a template and then I can use values from api response with loop variable ${row.name} and so on

我还使用了fetch，它现在是大多数浏览器中的本机，而不是XMLhttpRequest，因为它包含很多代码.您可以根据需要回退到xhr，但是内部逻辑是您应该关注的

I also used fetch which is now native in most browsers instead of XMLhttpRequest coz its a lot of code. You can fallback to xhr if you want but the inner logic is what you should be looking at

<body>
  <div class="contain">
  </div>
</body>

<script>
  fetch("https://jsonplaceholder.typicode.com/comments").then(res => res.json()).then(data => {
    let html = '';
    for (const row of data) {
      html += `
      <div class="row" id="${row.id}">
        <div class="row__inner">
          <div class="tile">
            <i id ="icon" class="fas fa-passport fa-2x"></i>
            <p id="name" class="title-text ">${row.name}</p>
            <h2 id="id" class="unitdesc">x..45..322.2</h2>
            <p class="small-text ">more</p>
          </div>
        </div>
      </div>
      `
    }
    document.querySelector('.contain').innerHTML = html;
  })
</script>

在刻度线不起作用的情况下为IE更新

Update for IE where tick doesn't work

html += '<div class="row" id="' + row.id + '">'
  + '<div class="row__inner">'
  + '<div class="tile">'
  + '<i id ="icon" class="fas fa-passport fa-2x"></i>'
  + '<p id="name" class="title-text ">' + row.name + '</p>'
  + '<h2 id="id" class="unitdesc">x..45..322.2</h2>'
  + '<p class="small-text ">more</p>'
  + '</div>'
  + '</div>'
  + '</div>'

仅在Javascript中具有不同段落的Dynamic Div

相关推荐