JS新しいインサートは、削除されたオブジェクト指向を置き換えます

新しい挿入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            font-size: 20px;
            font-family: "微软雅黑";
            line-height: 25px;
        }

        div {
            padding: 5px;
            text-align: center;
        }


    </style>
</head>
<body>
<p> 选择你喜欢的书:
    <input type="radio" name="book" id="offer" onclick="book()">剑指offer
    <input type="radio" name="book" onclick="book()">深入理解Java虚拟机
</p>
<div id="div"></div>
<div></div>
<script>
    /*var a = document.getElementById("offer");
    var a1 = a.getAttribute("type");
    var a2 = a.getAttribute("name");
    console.log(a1);
    console.log(a2);*/


    function book() {
        var img1;
        var img2;
        var ele = document.getElementsByName("book");
        var a = document.getElementById("div")[0];
        //如果第一个按钮被触发,那么就执行if代码
        if (ele[0].checked){
        //先选择一个img标签
            img1 = document.createElement("img");
            //将img标签设置属性 src
            img1.setAttribute("src","../Image/1.png");
            img1.setAttribute("alt","剑指offer");
           // 将img1标签添加到a标签后面
            a.appendChild(img1);
        }else if (ele[1].checked){
        //如果选择的是第二个按钮,步骤和前一个一样
            img2 = document.createElement("img");
            img2.setAttribute("src","../Image/2.png");
            img2.setAttribute("alt"," Java虚拟机");
            a.appendChild(img2);
        }
    }
</script>
<script>

</script>

</body>
</html>

削除ノードを交換します

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0px;  
            margin: 0px;
            font-size: 20px;
        }
        ul li{
            /*将列表的黑圈去掉*/
            text-decoration: none;
        }
        li{
            /*图片加载在一行 浮动*/
            float: left;
            text-align: center;
            width: 500px;
            height: 50px;
        }
    </style>
</head>
<body>
<ul>
    <li>
        <img src="../Image/1.png" alt="" id="1">
        <p><input type="button" value="删除" onclick="del()"></p>
    </li>
    <li>
        <img src="../Image/2.png" alt="" id="2">
        <p><input type="button" value="替换" onclick="rep()"></p>
    </li>
</ul>
<script>
    function del() {
        var img1 = document.getElementById("1");
        //先找到父节点,再去删掉父节点的子节点对应的要删掉的节点 
        img1.parentNode.removeChild(img1);
    }
    function rep () {
        var old = document.getElementById("2");
        var newImg = document.createElement("img");
        newImg.setAttribute("src","../Image/1.png");
        //找到要替换的节点,和新节点
        old.parentNode.replaceChild(newImg,old);
    }


</script>

</body>
</html>

オブジェクト指向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*//创建对象yi
    var person = new Object();
    person.name = "hyf";
    person.age = 18;
    person.sex = "女";
    var v= person.valueOf();
    //给对象设置方法
    person.showName = function () {
        alert(this.name);
    }
    person.showName();
console.log(v);*/
    //创建对象二
    /*var student = {
        name:"hyf",
        age:18,
        sex:"女",
        showName:function () {
            alert(this.name);
        }
    };
    student.showName();
    console.log(student.toLocaleString());//Object
    console.log(student.toString());//Object*/
    //构造方法
    function person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.showName = function () {
            alert(this.name);
        }
    }


    var stu1 = new person("hyf1",18,"女");
    var stu2 = new person("hyf2",18,"女");
    var stu3 = new person("hyf3",18,"女");
    stu1.showName();
    stu2.showName();
    stu3.showName();

</script>

</body>
</html>

JS新しいインサートは、削除されたオブジェクト指向を置き換えます

おすすめ