使用JS增加标签

![](http://cdn.dow.115cms.com.miansheji.com/2020-05-24_5eca5597c27eb.jpg)

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="button" onclick="AddEle1();" value="+++">
        <input type="button" onclick="AddEle2();" value="+++2">
        <div id="i1">
        <input type="text"/>
            <hr/>
        </div>
        <script>
            function AddEle1() {
    //            创建一个标签，将标签添加到指定标签里面
                var tag="<p><input type='text'/></p> ";
                document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
    //            四个参数beforeBegin、 afterBegin、beforeEnd、afterEnd
            }
            function AddEle2() {
    //            创建一个标签，将标签添加到指定标签里面
                var tag=document.createElement('input');
                tag.setAttribute('type','text');
                tag.style.fontSize='19px';
                tag.style.color='red';
     
                var p =document.createElement('p');
                p.appendChild(tag)
                document.getElementById('i1').appendChild(p)
            }
        </script>
    </body>
    </html>