HTML：

 h3 haveTags /h3  div id= havetags /div  hr /  h3 addTags /h3  div id= addtags /div  button id= btn 返回的數組 /button 

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 += span + haveTags[i] + /span  addTag(haveTagsId, addTagsId, haveArr, addArr); for (var i = 0; i addTags.length; i++) { document.getElementById(addTagsId).innerHTML += span + addTags[i] + /span  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 += span + this.innerHTML + /span  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 += span + this.innerHTML + /span  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); }

相關文章推薦：

HTML實現獲取瀏覽器可視區域寬高（純代碼）

html實現圖片預加載的分析（附代碼）

以上就是html給定標簽選項并添加標簽（附代碼）的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。