DOM 节点的创建、删除、替换

只要在屏幕上托三个button按钮就可以了，下面就是程序运行时的界面：

<head>
    <title></title>
    <script type="text/javascript">
        function CreateNode() {
            var pnode = document.createElement('p');
            var tnode = document.createTextNode('烟花三月下扬州');
            pnode.appendChild(tnode);
            document.body.appendChild(pnode);
        }
        function ReplaceNode() {
            var pnode = document.createElement('p');
            var tnode = document.createTextNode('故人西辞黄鹤楼');
            pnode.appendChild(tnode);
            //获取要替换的p节点
                var oldnode = document.getElementsByTagName('p')[0];
            oldnode.replaceNode(pnode, oldnode); //此种方法只支持IE
            //oldnode.parentNode.replaceChild(pnode,oldnode);//通用的
        }
        function RemoveNode() {
            var oldnode = document.getElementsByTagName('p')[0];
            //oldnode.parentNode返回的是p节点的父节点，这里就是body，然后使用body节点的removeChild方法删除其下面的pnode节点
            oldnode.parentNode.removeChild(oldnode);
        }
    </script>
</head>
<body>
    <input id="Button1" type="button" value="创建节点" οnclick="CreateNode();"/><br/>
    <input id="Button2" type="button" value="替换节点" οnclick="ReplaceNode();"/><br/>
    <input id="Button3" type="button" value="删除节点" οnclick="RemoveNode();"/>
</body>

当我点击创建节点时就会出现下面的第一张图片；当我点击替换节点时就是下面的第二张图片的效果；

当我点击删除节点时就是下面的第三张图片，把前面的节点给删除了。

转载于:https://www.cnblogs.com/qzc900809/archive/2013/04/16/3024226.html

DOM 节点的创建、删除、替换相关推荐

VUE双向绑定的原理（简单版）+虚拟DOM 节点的创建和更新
手动敲敲代码,就很容易理解了,供参考 1.以下是VUE双向绑定的原理(简单版) 主要是监听和defineProperty实现简单的双向绑定 <html><head></h ...
DOM节点的插入、替换、克隆及删除
插入DOM节点插入内部的尾部: 父节点.appendChild(创建节点) 插入内部的某个前面: 父节点.insertBefore(创建的节点,已知的子节点) 替换DOM节点父节点.replace ...
jquery的DOM节点操作(创建和插入元素节点)
1.创建元素节点 2.插入节点动态创建新元素节点后,需要执行插入或追加操作,否则不会在页面显示出来. 按照元素的层次关系来分,可以分为内部和外部两种方法元素内部插入子节点元素内部插入子节点有两种 ...
JavaScript文档对象模型DOM节点操作之删除节点（6）
removeChild方法只能删除当前节点的子节点效果展示: 示例展示: <!DOCTYPE html> <html><head><meta charset ...
089_DOM节点动态创建、添加和删除
1. 创建节点 1.1. 创建元素 document.createElement(tagName); 1.2. 创建文本 document.createTextNode("这是新文本.&qu ...
js添加多个子节点_JS创建DOM节点－使用document.createElement()创建子节点或同级节点...
在一个Web页面中,需要弹出一个提示信息显示给用户.基于这个需求,要使用document.createElement()创建一个DOM节点.创建完节点后,还要使用appendChild()或inser ...
DOM基本操作（获取元素、节点的创建和添加、节点的替换和删除）
获取元素 document.getElementById通过id名字获取节点 <div id="box"><ul><li>1</li> ...
【JavaScript】DOM节点-创建、插入、删除、替换、克隆节点
文章目录 DOM节点创建节点 1. 创建元素节点 2. 创建文本节点插入节点 1. appendChild() 2. insertBefore() 删除节点 1. removeChilde() 2 ...
JavaScript DOM 6 - 节点的创建，插入，替换，删除
1: 节点的创建新建一个新节点的方式主要有三种: 1: createElement() document.createElement(tagName); //返回一个HTMLElement类型的节点 ...

DOM 节点的创建、删除、替换

DOM 节点的创建、删除、替换相关推荐

最新文章

热门文章