JS创建替换删除节点

最新推荐文章于 2023-10-29 09:43:43 发布
最新推荐文章于 2023-10-29 09:43:43 发布
阅读量1.2k 收藏
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linlin2294592017/article/details/8809928
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>


</html>
Dlinlin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript 替换节点详解
大剑师兰特的GIS世界
06-09 896
在JavaScript中，替换节点是指将DOM树中的某个节点用另一个新节点替换的操作。这一功能对于动态修改页面内容、实现复杂的UI交互非常有用。以下是关于替换节点的详细说明、示例代码、注意事项以及应用场景。
【JavaScript】DOM节点-创建、插入、删除、替换、克隆节点
LuWeien的博客
01-04 1364
/ 把res这个节点放到body里面的最后面 appendChild。
js删除/替换节点
cheng_cuo_tuo的博客
01-26 2778
&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;style type="text/css"&gt; div { margin: 1em; } #red{ borde
js中添加 删除 替换 插入节点所用的方法
最新发布
子玉的博客
10-29 531
这将在具有 id 为 "parent" 的元素内，在具有 id 为 "referenceNode" 的子节点之前插入一个新的 `` 子节点。这将在具有 id 为 "parent" 的元素内，将具有 id 为 "oldChild" 的子节点替换为新创建的 `` 子节点。- `appendChild()` 方法用于将一个节点作为另一个节点的子节点添加到指定父节点的末尾。- `appendChild()`: 将一个节点作为另一个节点的子节点添加到指定父节点的末尾。
js节点的添加 删除 插入 替换
DDD_Yi的博客
10-07 624
一.创建元素节点createElement添加节点 node.appendChild(child) -->node父级 child 子级 元素追加到最后面 效果图 二.插入节点insertBeforenode.insertBefore(child,指定元素)-->node父级 child 子级 效果图 三.删除节点node.removeChild(child)-->node父级 child 子级 四.替换节点 父级.replac...
html删除已添加的节点,JavaScript DOM 6 - 节点的创建，插入，替换，删除
weixin_31520593的博客
06-18 288
1: 节点的创建新建一个新节点的方式主要有三种：1: createElement()document.createElement(tagName); //返回一个HTMLElement类型的节点，参数为字符串类型的标签名字var p = document.createElement('p'); //2: createTextNode()document.createTextNode(text);/...
JS创建、插入、删除和修改节点
m0_61685240的博客
09-26 1383
在 JavaScript 中，使用 HTML DOM 创建、插入、修改（替换）和删除节点需要分别调用 document 对象和元素对象的相应方法来实现，调用情况分别如下： 创建节点： 创建元素节点调用 document.createElement（节点名）； 创建文本节点调用 document.createTextNode（节点名）； 创建属性节点调用 document.createAttribute（节点名）; 元素节点的内容也可以使用：元素节点 .innerHTML 来设置。 节点的
原生js删除节点、替换节点、复制节点
热门推荐
LLL_liuhui的博客
04-17 3万+
1、removeChild() 用来删除父节点的一个子节点。 parent.removeChild(childNode); 如下：<div id="box"> <p id="p1">这是一个段落</p> <p id="p2">第二个段落</p> </div> <script> var box=document.getElementById("box"); //找到父元素
JS DOM基本操作之创建、插入、删除、替换节点操作
qq_45560350的博客
08-23 4810
创建dom节点（并未添加到页面中，一般配合插入方法使用） document.createElement(); 创建一个元素节点 var div = document.createElement('div'); 可以看到虽然创建了div节点，但页面中并没有显示 因为这里只是创建div节点，并没有把它添加到页面中 document.createTextNode(); 创建一个文本节点 var text = document.createTextNode('殷志源'); 没有添加到页面中 do
JS实现添加,替换,删除节点元素的方法
10-22
主要介绍了JS实现添加,替换,删除节点元素的方法,实例分析了javascript针对节点元素的替换、删除及常用的几种添加技巧,需要的朋友可以参考下
示例6：删除和替换节点.rar_删除和替换节点
09-20
一、删除节点 1. `removeChild()` 方法：此方法接受一个子节点作为参数，然后将其从其父节点的子节点列表中移除。例如，如果我们有一个`<div>`元素，里面有一个`<p>`元素，我们可以这样删除它： ```javascript var...
javaScript(JS)替换节点实现思路介绍
10-27
在JavaScript（JS）中，操作DOM（文档对象模型）节点是常见的任务，包括创建、替换和删除节点。本文将详细讲解如何实现JavaScript中的节点替换功能，以及与之相关的DOM操作。 首先，我们要理解DOM的基本概念。DOM是...
javascript Firefox与IE 替换节点的方法
10-29
### JavaScript 中 Firefox 与 IE 替换节点的方法 在 Web 开发中，DOM（文档对象模型）操作是一项基本技能，特别是在动态更新页面内容时尤为重要。本文将深入探讨如何在不同的浏览器环境中（特别是 Firefox 和 ...
JS操作图片（添加，更改，删除）
段琳琳
04-16 1万+
Image     {         width:100px;         height:100px;         }                          function chuangjian() {          //添加图片             var array = ['1.jpg',
jQuery设置文字样式
段琳琳
04-18 1万+
p     {         background-color:#eee; font-size:30px;         }         .classadd         {             font-weight:bold; font-family:微软雅黑; font-size:40px; background-color:Green;
jQuery中fadeIn、fadeOut、fadeTo的用法（图片隐藏与显示）
段琳琳
05-07 9650
#img1     {         width:400px; height:500px;         }                     $(function () {             $('#Button1').bind('click', function () {                 $('img').fadeOut(2000, fu
jQuery邮箱验证
段琳琳
04-23 8646
.txtbackcolor     {         background-color:#eee;         }                     $(function () {             var state = false;             $('#txtEmail').focus(function () {
15.请写出JavaScript创建节点，操作节点，替换节点，删除节点的语法？
03-31
创建节点： 1. document.createElement(tagName) // 创建元素节点 2. document.createTextNode(text) ...删除节点： 1. node.parentNode.removeChild(node) // 删除node节点 2. node.remove() // 从DOM中删除该节点
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值