JS创建元素笔记

最新推荐文章于 2021-07-04 06:26:01 发布

@hxl

最新推荐文章于 2021-07-04 06:26:01 发布

阅读量172

点赞数

本文链接：https://blog.csdn.net/qq_38105960/article/details/97806971

版权

方式一：document.write,缺点创建好的元素会把之前页面中所有内容替换掉

方式二：innerHTML 创建好的元素会将当前盒子的内容替换掉，但不会替换页面中的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="button" value="点击添加h1" id="btn">
<button id="btn1">创建元素</button>
<div id="dv">
    添加内容
</div>
<script src="common.js"></script>
    <script>
        my$('btn').onclick=function () {
            // 方式一:document.write,缺点创建好的元素会把之前页面中所有内容替换掉
            document.write('<h1>使用document.write动态添加的h1标签</h1>');
        }

        my$('btn1').onclick=function () {
            // 方式一:innerHTML,创建好的元素会将当前盒子的内容替换掉
            my$('dv').innerHTML='<p>使用innerHTML动态添加的p标签</p>'
        }

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

方式三：①创建元素document.createElement(‘标签名’)
②将元素追加到负元素中父元素.appendChild(上一步创建的元素)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<input type="button" id="btn" value="方式三创建p标签">
<div id="dv"></div>

<script src="common.js"></script>
<script>
    // 方式三创建元素document.createElement('标签名')
       my$('btn').onclick=function () {
           var dv=my$('dv');
           var pObj=document.createElement('p');
           dv.appendChild(pObj);
           pObj.innerText='方式三创建元素';
       }
</script>

元素相关的方法
1.insertBefore( ) 在某个元素之前插入一个新的元素

<body>
<input type="button" value="插入" id="btn">
<ul id="uu">
    <li>第一</li>
    <li>第二</li>
    <li id="three">第三</li>
    <li>第四</li>
</ul>
<script>
    document.getElementById("btn").onclick = function () {
        //创建一个li
        var liobj = document.createElement("li");
        //为创建的li设置内容
        liobj.innerHTML = "哈哈哈";
        //获取ul
        var uuobj = document.getElementById("uu");
        //获取第三个li
        var threeobj = document.getElementById("three");
        //把新创建的li放到第三个li的前面
        //uuobj.insertBefore(liobj,threeobj);
        //把新创建的li放到ul中第一个元素的位置
        uuobj.insertBefore(liobj, uuobj.firstElementChild);
    }
</script>
</body>

2.replaceChild( ) 替换某个元素


<body>
<input type="button" value="替换" id="btn">
<ul id="uu">
    <li>第一</li>
    <li>第二</li>
    <li id="three">第三</li>
    <li>第四</li>
</ul>
<script>
    document.getElementById("btn").onclick = function () {
        //创建一个li
        var liobj = document.createElement("li");
        //为创建的li设置内容
        liobj.innerHTML = "哈哈哈";
        //获取ul
        var uuobj = document.getElementById("uu");
        //获取第三个li
        var threeobj = document.getElementById("three");
        //把新创建的li替换成第三个li
        uuobj.replaceChild(liobj, threeobj);
    }
</script>
</body>

3.removeChild( ) 删除某个元素


<body>
<input type="button" value="删除" id="btn">
<ul id="uu">
    <li>第一</li>
    <li>第二</li>
    <li id="three">第三</li>
    <li>第四</li>
</ul>
<script>
    document.getElementById("btn").onclick = function () {
        //获取ul
        var uuobj = document.getElementById("uu");
        //获取第三个li
        var threeobj = document.getElementById("three");
        //把三个li删除
        uuobj.removeChild(threeobj);
    }
</script>
</body>

5.只创建一个元素

<!DOCTYPE html>
<html lang="en">
<<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        div {
            width: 200px;
            height: 60px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
<script>
    //先判断有没有, 有就删除, 然后再创建
    document.getElementById("btn").onclick = function () {
        //判断,div中有没有这个按钮,有就删除
        //判断这个按钮的子元素是否存在
        if (document.getElementById("btn2")) {//如果为true就有
            document.getElementById("dv").removeChild(document.getElementById("btn2"));

        }else{
            var obj = document.createElement("input");
            obj.type = "button";
            obj.value = "按钮";
            obj.id = "btn2";
            document.getElementById("dv").appendChild(obj);
        }
    }
</script>
</body>
</html>

@hxl

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS创建元素笔记

方式一：document.write,缺点创建好的元素会把之前页面中所有内容替换掉方式二：innerHTML 创建好的元素会将当前盒子的内容替换掉，但不会替换页面中的内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title...
复制链接

扫一扫