javascript - 如何用标签包裹多个 HTML 字符串？

Question

我是编码新手，并尝试用 HTML 标签包装大量字符串。经过搜索，我已经找到了一个method在这里，但我已经在 VS Code 中尝试过了，它似乎对我不起作用。可能我做错了什么。

为了进一步澄清，我试图用 HTML 标签包装一大串字符串。

Elina Arnwine
Freddie Cane
Melia Pittenger
Nobuko Grove
.....

到

<li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Elina Arnwine</a></li>
....

如果您能提供任何帮助，我们将不胜感激。

Answer 1

我认为您使用的是 javascript，这使得通过映射列表和创建元素来实现这一点变得非常简单:

const names = [
  'Elina Arnwine',
  'Freddie Cane',
  'Melia Pittenger',
  'Nobuko Grove'
  ];
  
function createLI(name) {
  const el = document.createElement('li');
  const a = document.createElement('a');
  el.className = 'nav-item';
  a.className = 'nav-link text-small pb-0';
  a.appendChild(document.createTextNode(name));
  el.appendChild(a);
  document.getElementById('ul').appendChild(el);
}

names.map(createLI);

<ul id='ul'></ul>

或者你可以使用模板

const names = [
  'Elina Arnwine',
  'Freddie Cane',
  'Melia Pittenger',
  'Nobuko Grove'
];
  

function manTemplate(name) {
  const tmp = document.getElementById('li-template');
  const clone = document.importNode(tmp.content, true);
  clone.querySelector('a').innerText = name;
  document.getElementById('ul').appendChild(clone);
}

names.map(manTemplate);

<template id="li-template">
    <li class="nav-item"><a href="" class="nav-link text-small pb-0 "></a></li>
</template>

<ul id='ul'></ul>