JS动态生成

首先的是定义一个变量存储动态生成的html结构,如图所示

var hp = '<div class="com-css" id="Half-price">'+ '<label style="margin-left: 25.5px; " class=""><span>*</span>&nbsp;&nbsp;&nbsp;&nbsp;优惠类型:</label>'
 +'<input class="input" type="" name="" value="第二件半价">'
  +'<button id="button1"  class="layui-btn layui-btn-sm">删除</button>'
   +'</div>' ;

然后添加到最外层div代码如下：

$("#node").append(hp);

代码解析：#node是最外层div,hp是动态生成的div

以上代码是我在写select下拉菜单,用户选择下拉框的值之后,出现相对应的div。
ps:一开始我实现该功能的想法是用style="display:block;"和style="display: none;"控制div的显示与隐藏,实现出来发现变成了替换隐藏。而我真正想要实现的功能是点击下拉框内容,使相对应的div出现,点击一个下拉菜单,出现一个div,点击多个下拉菜单,出现多个div,且出现的顺序类似累加效果,是在上一个的div的末尾出现,要实现该功能,目前只发现要用动态生成。

声明：本人是菜鸟一枚,有说得不对的地方,还望大神帮忙纠正,谢谢。