Question

正如标题所述，我不能使用.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，依此类推。

我必须使用太多引号的事实确实使我感到困惑。

我应该如何使用它来获得理想的效果？

Answer 1

如果我做对了，那么您正在尝试创建l行和c列的maxtrix。而不是在每次循环迭代时都将元素（如HTML）附加到DOM（这在性能上是昂贵的），而只是将每个输入推入数组中。然后，您可以加入该数组并使用insertAdjacentHTML将HTML添加到页面的末尾。

这里我也使用了template literal，因此对引号应该去的地方的混淆减少了。我在输入中添加了一个占位符，以向您展示类的外观，因此您无需检查页面。

希望有帮助。

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>

Answer 2

您的报价错误。 j不应放在引号内。

document.querySelector(".matrice-" + p).insertAdjacentHTML('beforeend', '<input class="l' + i + 'c' + j + '" size="3" maxlength="4" inputmode="numeric"></input>')

另一个答案中的方法将更加高效-每次调用insertAdjacentHTML()时，浏览器都必须解析新的HTML。一次完成所有操作通常会更好。

无法在嵌套的for循环中使用.insertAdjacentHTML

2 个答案: