时间戳

首页 > 解决方案 > 不能在嵌套的 for 循环中使用 .insertAdjacentHTML

javascript - 不能在嵌套的 for 循环中使用 .insertAdjacentHTML

问题描述

正如标题所说，我不能使用 .insertAdjacentHTML 因为我只是不知道如何使用。

for(let i=1;i<=m;i++)
    {
        for(let j=1;j<=n;j++)
        {
            document.querySelector(".matrice-" + p).insertAdjacentHTML('beforeend', '<input class="l' + i + 'c' + 'j" size="3" maxlength="4" inputmode="numeric"></input>')
        }
        document.querySelector(".matrice-" + p).insertAdjacentHTML('beforeend', '<br/>')
    }
    }

我希望输入类像 l1c1 l1c2 l1c3 等等，但我似乎无法让 j 作为变量工作。它被用作字符串，所以我所有的类都是 l1cj l2cj 等等。

我必须使用这么多引号的事实真的让我感到困惑。

我应该如何使用它来获得预期的效果？

标签： javascript

解决方案

如果我做对了，您正在尝试创建一个 l 行和 c 列的 maxtrix。无需在每次循环迭代时将元素（作为 HTML）附加到 DOM（这在性能方面代价高昂），只需将每个输入推入一个数组即可。然后您可以加入该数组并insertAdjacentHTML在最后将 HTML 添加到页面中。

在这里，我也使用了模板文字，因此对引号应该放在哪里的混淆更少。我在输入中添加了一个占位符，以向您展示类的外观，因此您不必检查页面。

希望能帮助到你。

const arr = [];
const m = n = 3;

for (let i = 1; i <= m; i++) {
  for (let j = 1; j <= n; j++) {
    const input = `
      <input
        class="l${i}c${j}
        size="3"
        maxlength="4"
        inputmode="numeric"
        placeholder="l${i}c${j}"
      />`;
    arr.push(input);
  }
}

const root = document.querySelector('#root')
root.insertAdjacentHTML('beforeend', arr.join(''));
* {
  box-sizing: border-box;
}

#root {
  max-width: 100px;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

input {
  -moz-appearance:textfield;
}
<div id="root"></div>

推荐阅读