HTML：

 h3 haveTags /h3  div id= havetags /div  hr /  h3 addTags /h3  div id= addtags /div  button id= btn 返回的數(shù)組 /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:

// 擁有的標(biāo)簽 var haveArr = [ HTML , CSS , JavaScript , jQuery , Vue , Bootstrap  // 添加的標(biāo)簽 var addArr = [ PHP , MySQL  * [tagsShow 展示擁有的標(biāo)簽] * @param {[String]} haveTagsId [展示擁有標(biāo)簽的HTML標(biāo)簽Id] * @param {[String]} addTagsId [展示添加標(biāo)簽的HTML標(biāo)簽Id] * @param {[Array]} haveTags [擁有標(biāo)簽的數(shù)組] * @param {[Array]} addTags [添加標(biāo)簽的數(shù)組] 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); * 添加標(biāo)簽 * @param {[String]} haveTagsId [展示擁有標(biāo)簽的HTML標(biāo)簽Id] * @param {[String]} addTagsId [展示添加標(biāo)簽的HTML標(biāo)簽Id] * @param {[Array]} haveTags [擁有標(biāo)簽的數(shù)組] * @param {[Array]} addTags [添加標(biāo)簽的數(shù)組] 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); // 從數(shù)組中刪除該元素 delTag(haveTagsId, addTagsId, haveTags, addTags); * 刪除標(biāo)簽 * @param {[String]} haveTagsId [展示擁有標(biāo)簽的HTML標(biāo)簽Id] * @param {[String]} addTagsId [展示添加標(biāo)簽的HTML標(biāo)簽Id] * @param {[Array]} haveTags [擁有標(biāo)簽的數(shù)組] * @param {[Array]} addTags [添加標(biāo)簽的數(shù)組] 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); // 從數(shù)組中刪除該元素 addTag(haveTagsId, addTagsId, haveTags, addTags); // 展示標(biāo)簽 tagsShow( havetags , addtags , haveArr, addArr); // 最終數(shù)組 document.getElementById( btn ).onclick = function(){ console.log(haveArr); console.log(addArr); }

相關(guān)文章推薦：

HTML實(shí)現(xiàn)獲取瀏覽器可視區(qū)域?qū)捀撸兇a）

html實(shí)現(xiàn)圖片預(yù)加載的分析（附代碼）

以上就是html給定標(biāo)簽選項(xiàng)并添加標(biāo)簽（附代碼）的詳細(xì)內(nèi)容，html教程

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