时间戳

首页 > 解决方案 > 如何用标签包装多个 HTML 字符串？

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

问题描述

我是编码新手，并试图用 HTML 标记包装大量字符串。搜索后，我已经在这里找到了一个方法，但是我已经在 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>
....

您能提供的任何帮助将不胜感激。

标签： javascripthtml

解决方案

我认为您正在使用 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>

推荐阅读