html如何添加环绕标签,html给定标签选项并添加标签（附代码）

最新推荐文章于 2024-10-22 16:14:28 发布

weixin_39522170

最新推荐文章于 2024-10-22 16:14:28 发布

阅读量578

点赞数

文章标签： html如何添加环绕标签

本文通过JavaScript实现HTML标签的添加与删除功能。提供`html给定标签选项并添加标签`的代码示例，详细展示了如何在页面上动态展示已有的标签，并允许用户在两个标签集合间进行增删操作。涉及到的JavaScript方法包括`tagsShow`、`addTag`和`delTag`，用于展示、添加和删除标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章给大家介绍的内容是关于html给定标签选项并添加标签(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

HTML：

haveTags

addTags

返回的数组

CSS：#havetags span,#addtags span { display: inline-block; padding: 0 0 0 10px; margin: 2px 5px; border: 1px solid #000;}#havetags span::after,#addtags span::after { content: "+"; display: inline-block; padding: 0 10px; background-color: #00ffff; margin-left: 5px;}#addtags span::after { content: "x";}

JavaScript:// 拥有的标签 var haveArr = ["HTML", "CSS", "JavaScript", "jQuery", "Vue", "Bootstrap"]; // 添加的标签 var addArr = ["PHP", "MySQL"]; /** * [tagsShow 展示拥有的标签] * @param {[String]} haveTagsId [展示拥有标签的HTML标签Id] * @param {[String]} addTagsId [展示添加标签的HTML标签Id] * @param {[Array]} haveTags [拥有标签的数组] * @param {[Array]} addTags [添加标签的数组] */ function tagsShow(haveTagsId, addTagsId, haveTags, addTags) { for (var i = 0; i < haveTags.length; i++) { document.getElementById(haveTagsId).innerHTML += "" + haveTags[i] + ""; } addTag(haveTagsId, addTagsId, haveArr, addArr); for (var i = 0; i < addTags.length; i++) { document.getElementById(addTagsId).innerHTML += "" + addTags[i] + ""; } delTag(haveTagsId, addTagsId, haveTags, addTags); } /** * 添加标签 * @param {[String]} haveTagsId [展示拥有标签的HTML标签Id] * @param {[String]} addTagsId [展示添加标签的HTML标签Id] * @param {[Array]} haveTags [拥有标签的数组] * @param {[Array]} addTags [添加标签的数组] */ function addTag(haveTagsId, addTagsId, haveTags, addTags) { var len = document.getElementById(haveTagsId).children.length; for (var i = 0; i < len; i++) { document.getElementById(haveTagsId).children[i].onclick = function() { this.remove(); addTags.push(this.innerHTML); document.getElementById(addTagsId).innerHTML += "" + this.innerHTML + ""; haveTags.splice(haveTags.indexOf(this.innerHTML), 1); // 从数组中删除该元素 delTag(haveTagsId, addTagsId, haveTags, addTags); } } } /** * 删除标签 * @param {[String]} haveTagsId [展示拥有标签的HTML标签Id] * @param {[String]} addTagsId [展示添加标签的HTML标签Id] * @param {[Array]} haveTags [拥有标签的数组] * @param {[Array]} addTags [添加标签的数组] */ function delTag(haveTagsId, addTagsId, haveTags, addTags) { var len = document.getElementById(addTagsId).children.length; for (var i = 0; i < len; i++) { document.getElementById(addTagsId).children[i].onclick = function() { this.remove(); haveTags.push(this.innerHTML); document.getElementById(haveTagsId).innerHTML += "" + this.innerHTML + ""; addTags.splice(addTags.indexOf(this.innerHTML), 1); // 从数组中删除该元素 addTag(haveTagsId, addTagsId, haveTags, addTags); } } } // 展示标签 tagsShow('havetags', 'addtags', haveArr, addArr); // 最终数组 document.getElementById("btn").onclick = function(){ console.log(haveArr); console.log(addArr); }