示例之创建标签

up1292

已于 2022-09-20 10:35:19 修改

阅读量86

点赞数 1

分类专栏： JavaScript学习笔记文章标签： javascript

于 2022-09-20 10:27:25 首次发布

本文链接：https://blog.csdn.net/up1292/article/details/126948170

版权

JavaScript学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

通过创建标签的方法，添加输入框的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="+" onclick="AddEle1();" />
    <input type="button" value="+" onclick="AddEle2();" />
    <div id="i1">
        <p><input type="text" /></p>
    </div>

    <script>
        function AddEle1(){
            // 通过字符串创建
            var tag = "<p><input type='text' /></p>";
            //注意：第一个参数只能是'beforeBegin','afterBegin','beforeEnd','afterEnd'
            document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
        }

        function AddEle2(){
            // 通过对象方式创建
            var tag = document.createElement('input');
            tag.setAttribute('type','text');
            tag.style.color = 'red';
            // tag.style.fontSize = '16px';

            var p = document.createElement('p');
            p.appendChild(tag);

            document.getElementById('i1').appendChild(p);
        }
    </script>
</body>
</html>