Javascript利用HTML DOM按需添加自定义标签元素

最新推荐文章于 2021-06-28 07:07:21 发布

chenlkissmm

最新推荐文章于 2021-06-28 07:07:21 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/chenlkissmm/article/details/80796378

版权

该博客介绍如何在富文本编辑器中利用JavaScript动态创建和添加自定义标签元素，特别是<input>元素，允许用户根据需要添加最多5个这样的元素，以实现整齐排列的效果。

摘要由CSDN通过智能技术生成

在富文本编辑器下方添加自定义标签，初始化一个<input>元素，然后按照用户需求自行添加，最多5个，这样弄出来一排整齐的小框框，效果如图。

贴出主要代码片段

<div class="card m-0 p-0">
	<div class="row col-12 m-0 p-0" id="labelgroup">
		<div
			class="col-6 col-sm-4 col-md-3 col-lg-2 m-0 p-0 input-group-addon"
			style="">
			<h1 class="col-12" style="margin: 0 auto;">
				<a href="javascript:addlabel()"
					class="col-12 fa fa-plus-circle" style="color: silver;"></a>
			</h1>
		</div>
		<div
			class="input-group col-6 col-sm-4 col-md-3 col-lg-2 m-0 p-0"
			id="div1">
			<span class="input-group-addon icon-tag"></span> <input
				class&#