详解Java脚本语言添加给定的标签选项

先看看效果图：

代码实现：

超文本标记语言代码：

h3hatags/h3div id='有标签'/div HR/h3addTags/h3div id=' addtags '/div按钮id=' BTN '返回的数组/buttoncss代码：

#havetags span，# addtags span { display : inline-block；padd : 0 0 10pxmargin : 2px 5pxborder : 1px固体# 000;} #在# addtags跨度：之后，在# addtags跨度：之后{ content : }；显示器：内联块；padding: 0 10px背景-color : # 00 ffff；左边距左： 5px } # add tags span : after在{ content: 'x '之后；}js代码：

//拥有的标签var HaVerr=[' HTML '，' CSS '，' JavaScript '，' jQuery '，' Vue '，' Bootstrap ']；//添加的标签var addArr=['PHP '，' MySQL ']；/* * *[标记显示展示拥有的标签]* @ param {[字符串]}有标签号[展示拥有标签的超文本标记语言标签Id] * @param {[String]} addTagsId [展示添加标签的超文本标记语言标签Id] * @param {[Array]}有标签[拥有标签的数组] * @param {[Array]} addTags [添加标签的数组]*/函数标记显示(HatTagsid、addTagsId、HatTagS、AddTagS){ for(var I=0；我有标签。长度；I){文档。getelementbyid(HatTagSid).innerHTML='span '有标记' I '/span '；} AddTag(HatTagSid、addTagsId、haveArr、AddArr)；for(var I=0；i addTags.lengthI){ document。getelementbyid(addTagsId).innerHTML=' span ' addTags[I]'/span '；} delTag(HatTagsid、addTagsId、HatTagS、AddTagS)；} /** * 添加标签* @ param {[字符串]}有标签号[展示拥有标签的超文本标记语言标签Id] * @param {[String]} addTagsId [展示添加标签的超文本标记语言标签Id] * @param {[Array]}有标签[拥有标签的数组] * @param {[Array]} addTags [添加标签的数组]*/函数AddTag(HatTagSid，addTagsId，HatTags，AddTagS){ var len=document。GetElementBYID(HatTagSid)。孩子们。长度；for(var I=0；我透镜；I){文档。getelementbyid(HatTagSid).儿童onclick=function(){ this。移除()；添加标签。推(这个。innerhtml)；文件。getelementbyid(addTagsId).innerHTMl=' span ' this。innerHTMl '/span '；有标签。拼接(有标签。indexof(此。innerhtml)，1)；//从数组中删除该元素delTag(HatTagsid、addTagsId、HatTagS、AddTagS)；} } } /** * 删除标签* @ param {[字符串]}有标签号[展示拥有标签的超文本标记语言标签Id] * @param {[String]} addTagsId [展示添加标签的超文本标记语言标签Id] * @param {[Array]}有标签[拥有标签的数组] * @param {[Array]} addTags [添加标签的数组]*/函数delTag(HatTagSid，addTagsId，HatTagS，AddTagS){ var len=document。GetElementBYID(AddTagSid)。孩子们。长度；for(var I=0；我透镜；I){文档。getelementbyid(addTagsId).儿童onclick=function(){ this。移除()；有标签。推(这个。innerhtml)；文件。getelementbyid(HatAgSid).innerHTMl=' span ' this。innerHTMl '/span '；添加标签。拼接(添加标签。indexof(此。innerhtml)，1)；//从数组中删除该元素addTag(HatTagsid，addTagsId，HatTags，AddTags)；} } } //展示标签tagsShow('havetags '，' addtags '，haveArr，addArr)；//最终数组document.getElementById('btn ').onclick=function(){ console。日志(HaVerr)；控制台。日志(AddArr)；}以上就是Java脚本语言如何实现添加给定的标签选项？（代码实例)的详细内容，更多请关注服务器端编程语言(专业超文本预处理器的缩写)中文网其它相关文章！