zoukankan      html  css  js  c++  java
  • 在DIV后加句子

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <p>请自己定义并获取要求的内容</p>

    <div id="div1">获取我并显示我的文字内容
        <div>中间的内容</div>
    </div>
    <div>
        <div id="div22" >获取这个div,并添加一个新的div到后面</div>
    </div>
    <div>
        <div id="div33" >获取这个div,并用一个新的div将它替换</div>
    </div>
    <div>
        <div id="div44" >获取这个div,并在它之前添加一个新的div</div>
    </div>
    <button onclick="test1()">第一个</button>
    <button onclick="test2()">第二个</button>
    <button onclick="test3()">第三个</button>
    <button onclick="test4()">第四个</button>
    <script>
        function test4(){
            var div4 = document.getElementById('div44');
            var pdiv4 = div4.parentNode;

            var div=document.createElement("div");
            var oText = document.createTextNode("新插入的4号地div元素");
            div.appendChild(oText);

            pdiv4.insertBefore(div, div4);
        }
        function test3(){
            var div3 = document.getElementById('div33');
            var pdiv3 = div3.parentNode;

            var div=document.createElement("div");
            var oText = document.createTextNode("我是新的第三号");
            div.appendChild(oText);

            pdiv3.replaceChild(div, div3);
        }
        function test2(){
            var ww=document.getElementById('div22');
            var pdiv = ww.parentNode;  // 找到付元素
    //        alert(pdiv.innerHTML);

            var div=document.createElement("div");
            var oText = document.createTextNode("haha");
            div.appendChild(oText);
            // appendChild函数 将新的子元素添加到所有已经存在的子元素的末尾
    //        document.body.appendChild(div);

            pdiv.appendChild(div);

        }
    function test1() {
        var div1 = document.getElementById('div1');
    //    div1.firstChild.nodeValue = '改变了内容';
        alert(div1.innerHTML);
    //    alert(div1.innerText);
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    修改VS中的附加依赖项的继承值
    cocos2dx的addChild接口设计
    svn cleanup失败解决方法
    vi显示中文乱码
    CentOS 7.4 shell 不显示当前用户和路径的问题
    生产工具的差距导致的生产力(生产效率)的差距
    GPU的历史:从固定管线到可编程管线再到通用计算平台
    聊Java中的任务调度的实现方法及比较
    Spring Boot 揭秘与实战之RabbitMQ
    一个让Java事半功倍的反射库
  • 原文地址:https://www.cnblogs.com/dzy1997-com/p/6582959.html
Copyright © 2011-2022 走看看