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，通过在列表上进行映射并创建elemnt，可以非常简单地做到这一点：

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>

如何用标签包装多个HTML字符串？

1 个答案: