创建一个系统以在 Javascript 中添加产品标签答案

【问题标题】：Create a system to add product tags in Javascript创建一个系统以在 Javascript 中添加产品标签
【发布时间】：2021-04-08 10:16:41
【问题描述】：

我正在开发自己的电子商务。我想创建一个如图所示的界面来为产品添加标签。我希望在添加标签时将其显示为图像。

Image link

请问，您能告诉我一些尝试解决此问题的方法吗？使用 HTML 或 Javascript 实现它的一些提示或示例。

【问题讨论】：

嗨，Emili，欢迎来到 SO。这个问题被否决的原因是您尚未展示到目前为止您已经尝试过的内容，或者您是否已经为自己尝试过。
好的，抱歉，我是新手。
没关系，只是想给您反馈，以便您可以改进您的问题。你可以阅读如何提出一个好问题here

标签： javascript html tags

【解决方案1】：

我不确定这是您需要的，但您可以从它开始。

$( "#add" ).click(function() {
  var x = document.getElementById("tags");
  var li = document.createElement("LI");
  var a = document.createElement("A");
  var temp=x.appendChild(li);
  temp=temp.appendChild(a);
  temp.innerHTML=document.getElementById("name").value;
  temp.setAttribute("class","tag");
});

body {
  font: 12px/1.5 'PT Sans', serif;
  margin: 25px;
}

.tags {
  list-style: none;
  margin: 0;
  overflow: hidden; 
  padding: 0;
}

.tags li {
  float: left; 
}

.tag {
  background: #eee;
  border-radius: 3px 0 0 3px;
  color: #999;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 20px 0 23px;
  position: relative;
  margin: 0 10px 10px 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}

.tag::before {
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  content: '';
  height: 6px;
  left: 10px;
  position: absolute;
  width: 6px;
  top: 10px;
}

.tag::after {
  background: #fff;
  border-bottom: 13px solid transparent;
  border-left: 10px solid #eee;
  border-top: 13px solid transparent;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
}

.tag:hover {
  background-color: crimson;
  color: white;
}

.tag:hover::after {
   border-left-color: crimson; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Tags</h1>
<input type="text" id="name" name="name" >
<button id="add">Add</button>


<h2>Example</h2>
<ul id="tags" class="tags">
  <li><a href="#" class="tag">HTML</a></li>
  <li><a href="#" class="tag">CSS</a></li>
  <li><a href="#" class="tag">JavaScript</a></li>
</ul>

【讨论】：

不错。非常感谢！