时间戳

首页 > 解决方案 > 用javascript多次附加一个带有参数的html模板

javascript - 用javascript多次附加一个带有参数的html模板

问题描述

我想多次将这段代码附加到我的主 html 文件中（据我所知，这可以使用 Jquery）。但我的主要问题是我还必须根据附加编号修改 html 模板中元素的一些“id”。例如，我第一次附加模板时，id 应该是“item1”，但第二次应该是“item2”。在模板中，我要修改的 id 是： Sensor1 mac1 LastUpdate1 TempPlot1

模板：

<div class="container-fluid" style="margin-top: 100px">
  <div class="alert alert-success">
    <h2 id="Sensor1">Sensor desconectado!</h2>
  </div>
  <div class="jumbotron" style="background-color: white;">
    <div class="row">
      <div class="col-mb-3" style="text-align: center; ">
        <canvas id="gauge1" style="padding-top: 2%; margin-right: 50px; min-width: 200px;"></canvas> 
        <div class="card-body" style="text-align:left;">
          <div class="container" style="margin-left: -30px;">     
            <table class="table table-hover">
              <tbody>
                <tr>
                  <td>MAC</td>
                  <td id="mac1">xx:xx:xx:xx:xx:xx</td>
                </tr>
                <tr>
                  <td>LastUpdate</td>
                  <td id="LastUpdate1">----------</td>
                </tr>
              </tbody>
            </table>
            <span class="badge badge-success" style="display: none; " id="cnt1" >Conectado</span>
            <span class="badge badge-danger" style="display: block; " id="dcnt1">Desconectado</span>
          </div>
        </div>
      </div>
      <div class="col-mb-9" style="text-align: center;">
        <div id="TempPlot1" style=" margin: auto; box-shadow: 4px 6px 15px 1px rgba(0,0,0,0.25);"></div>
      </div>
    </div>
  </div> 
</div>

<div class="modal bs-wifi1" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content" style="text-align: center;">
      <div class="modal-header"><h4>WiFi INFO <i class="fas fa-wifi"></i></h4></div>
      <div class="modal-body"><p><strong>WiFi:</strong><span id="wifi1">{REDWiFI}</span></p></div>
      <div class="modal-body"><p><strong>RSSI:</strong><span id="rssi1">{RSSI}</span></p></div>
      <div class="modal-body"><p><strong>AP:</strong><span id="ap1" data-toggle="cerrar_sesion" title="Ingrese la direccion IP en su navegador para obtener mas informacion y poder configurar una nueva red WiFi.. Recuerde conectarse al mismo WiFI que figura arriba!"  data-placement="bottom" >{IP}</span></p></div>
    </div>
  </div>
</div>

<div class="modal bs-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header"><h4>Cerrar Sesion <i class="fa fa-lock"></i></h4></div>
      <div class="modal-body"><i class="fa fa-question-circle"></i> Estas seguro que queres cerrar sesion?</div>
      <div class="modal-footer"><a href="javascript:;" class="btn btn-primary btn-block">Cerrar Sesion</a></div>
    </div>
  </div>
</div>

是否可以将模板放在单独的文件中？或者必须在 js 中。谢谢。

标签： javascriptjqueryhtml

解决方案

使用for 循环和模板文字动态插入 id

这是一个基本示例，它创建了 10 个具有不同 ID 的跨度

for(let i=1;i<=10;i++)
{
  let div=document.createElement("div");
  div.innerHTML=`<span id="span${i}">Hey this is Span ${i} </span>`;
  document.body.append(div);
}

推荐阅读