js011-添加标签的两种方式 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加标签</title>
</head>
<body style="width: 1080px;margin:0 auto;">
    <div id="i1">
        <p>添加标签的两种方式：1-字符串形式，2-对象形式</p>
        <h1 style="text-align: center;background-color: #e75e15">例子</h1>
        <p><input onclick="addEle();" type="button" value="一：添加标签+"/></p>
        <p><input onclick="addEle2();" type="button" value="二：添加标签+"/></p>
    </div>
    <script>
        function addEle(){
            var tag = document.getElementById('i1');
            add_tag = "<p><input type='text' value='111' /></p>";
            tag.insertAdjacentHTML('beforeend',add_tag);
        }
        function addEle2() {
            var inp = document.createElement('input');
            inp.setAttribute('type', 'text');
            inp.setAttribute('value', '222');
            inp.style.color = 'red';
            var p = document.createElement('p');
            p.appendChild(inp);
            document.getElementById('i1').appendChild(p);
        }
    </script>
</body>
</html>
posted @ 2022-11-23 17:32  wode-wode  阅读(1658)  评论(0)    收藏  举报