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

最新推荐文章于 2023-05-12 21:25:35 发布

__XYQ

最新推荐文章于 2023-05-12 21:25:35 发布

阅读量609

点赞数

分类专栏：前端基础知识文章标签： javascript

本文链接：https://blog.csdn.net/qq_41144008/article/details/78806071

版权

前端基础知识专栏收录该内容

41 篇文章 0 订阅

订阅专栏

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" οnclick="AddEle1();" value="+"/>
<input type="button" οnclick="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>