javascript - 使用自动递增 Id 在 div 中添加新元素

Question

我一直在尝试寻找一种使用按钮在另一个 div 中添加一个 div 的方法，但我认为它的逻辑目前可能有点超出我的能力范围。基本上我有这个实验室设施，当我在页面中创建一个时，它应该将它们添加到数据库中，这已经完成并正在运行。

然后我需要一个 div 作为 popUp 来检索每个实验室的信息，这也有效，但如果我有多个实验室，则在一个 popUp 中显示这些实验室的所有信息意味着一个。这引出了我的下一点。

我需要并决定，当我单击 Aceptar 按钮时，创建的新 div 应该有一个 id=n，其中对于添加的每个新 div，它变为 n+1，所以 div1 的 id 为 1，div 2 为 2，并且很快。我认为这是使用数组...这样我就可以更新我的 php 代码:

 function getLabs(){
$query = "SELECT bk.idlab , bk.capacidad, bk.carrera, bk.ubicacion FROM labs as bk WHERE idDiv=bk.idlab"; (or something like that I think I have to declare idDiv first)

$result = do_query($query);

   return $result;
 }

现在这是我的代码...因为我被难住了:

在 php.ini 文件中的 HTML 代码。实验室列表页面:

      <div class="scroll-area" id="lista"> //THIS IS THE BIG DIV CONTAINING THE LIST

      <div>  //THIS FOR SHOWING PURPOSES HOW IT LOOKS.
          <p>Lab #1</p>
          <p class="info"><a href="#" id="lnkInfo">Info</p></a>
          <p class="info"><a href="reservarLab.html">Reservar</p></a>
      </div>

      <div class="box">
          <p>Lab #2</p>
          <p class="info"><a href="#">Info</p></a>
          <p class="info"><a href="reservarLab.html">Reservar</p></a>
      </div>

      <div class="box"> //So if I add another it would be Lab#4 with id=4
          <p>Lab #3</p>
          <p class="info"><a href="#">Info</p></a>
          <p class="info"><a href="reservarLab.html">Reservar</p></a>
      </div        

  </div>

这是我用于将实验室添加到 100% 工作的数据库的另一个页面中使用的按钮:

  <input class="formatButton verInfo2"  type="button" value="Aceptar" id="btnAceptar"   onclick="agregar()"/>

在两个页面(列表和添加)中，脚本和包含都存在。

我考虑添加新 div(以及删除一个)的代码遵循以下几行:

function agregar() {
var div = document.createElement('div');

div.className = 'box';

     '<div class="box">
          <p>Lab HERE GOES NUMBER</p>
          <p class="info"><a href="#" id="lnkInfo">Info</p></a>
          <p class="info"><a href="reservarLab.html">Reservar</p></a>
      </div>';

    document.getElementById('content').appendChild(div);
}

  function eliminar(input) {
 document.getElementById('content').removeChild( input.parentNode );
}

但是我现在对如何进行遇到了心理障碍 >.< 任何帮助都是天赐之物，我尽量保持简短，只放相关代码，但如果有其他我可以提供的东西，以获得一些帮助我会做的。

提前致谢并致以最良好的祝愿!

Answer 1

我认为你可以这样做:

div.id = querySelectorAll('lista > div').length +1;

每次添加 div 时长度都不同。所以这应该适合你。