JavaScript基础（15.Dom创建标签）

1.样式操作，这里不详写，遇到时候自然就会用了

2.属性操作，setAttribute需要注意下，第一个参数为属性名，第二个为属性内容，其他的不需要多讲。

JavaScript基础（15.Dom创建标签）

3.创建标签的两种方法（注意，jQuery里面没有创建标签的功能，所以应当学好这一部分）：

<!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="+"/>
<div id="i1">
    <p><input type="text"/></p>
</div>
<script>
    function AddEle1() {
        var tag = "<p><input type='text'/></p>";
        document.getElementById("i1").insertAdjacentHTML("beforeEnd", tag);
    }
    function AddEle2() {
        var tag = document.createElement("input");
        /*这里表示创建了一个input标签*/
        tag.setAttribute('type','text');
        tag.style.fontSize='20px';
        tag.style.color='red';

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

    }
</script>
</body>
</html>

这里是两种方法。作用都是一样，创建一个输入框。

点击加号键即可，左边的是第一种，右边的是第二种，为了区别，第二种是红色字体且更宽一些：

JavaScript基础（15.Dom创建标签）

JavaScript基础（15.Dom创建标签）

相关推荐