js获取元素的方法

最新推荐文章于 2022-09-09 19:02:38 发布

你是八月的光亮

最新推荐文章于 2022-09-09 19:02:38 发布

阅读量172

点赞数

1. document.write("标签的代码及内容");

缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉

<body>
<input type="button" value="创建一个p" id="btn"/>
码仙码仙码仙码仙码仙码仙
<script>
    //document.write("标签代码及内容");
    document.getElementById("btn").onclick = function () {
        document.write("<p>这是一个p</p>");
    };
</script>
</body>

2. 对象.innerHTML="标签及代码";

<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        div {
            width: 300px;
            height: 50px;
            border: 2px solid pink;
        }
    </style>
</head>
<body>
<input type="button" value="创建一个p" id="btn"/>
<div id="dv">这是div</div>
码仙码仙码仙码仙码仙码仙码仙
<script>
    //点击按钮,在div中创建一个p标签
    //对象.innerHTML="标签代码及内容";
    document.getElementById("btn").onclick = function () {
        document.getElementById("dv").innerHTML = "<p>天生我才必有用</p>";
    };
</script>
</body>

3. document.createElement("标签的名字");

<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        div {
            width: 200px;
            height: 50px;
            border: 2px dashed pink;
        }
    </style>
</head>
<body>
<input type="button" value="创建p" id="btn"/>
<div id="dv"></div>
<script>
    //创建元素
    //document.createElement("标签名字");对象
    //把元素追加到父级元素中
    //点击按钮,在div中创建一个p
    document.getElementById("btn").onclick = function () {
        //创建元素的
        var pObj = document.createElement("p");
        pObj.innerText = "这是一个p";
        //把创建后的子元素追加到父级元素中
        document.getElementById("dv").appendChild(pObj);
    };
</script>
</body>

你是八月的光亮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js获取元素的方法

1. document.write("标签的代码及内容");缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉<body><input type="button" value="创建一个p" id="btn"/>码仙码仙码仙码仙码仙码仙<script> //document.write("标签代码...
复制链接

扫一扫