html給定標(biāo)簽選項(xiàng)并添加標(biāo)簽的方法

這篇文章主要介紹html給定標(biāo)簽選項(xiàng)并添加標(biāo)簽的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站是專業(yè)的武隆網(wǎng)站建設(shè)公司，武隆接單;提供成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行武隆網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

HTML：

<h4>haveTags</h4>
    <div id="havetags"></div>
   <hr />
    <h4>addTags</h4>
     <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);
 
    }

以上是“html給定標(biāo)簽選項(xiàng)并添加標(biāo)簽的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前文章：html給定標(biāo)簽選項(xiàng)并添加標(biāo)簽的方法
網(wǎng)頁(yè)URL：http://bm7419.com/article8/pssoip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、小程序開發(fā)、面包屑導(dǎo)航、App設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)