js appendChild removeChild 添加 删除 子节点

最新推荐文章于 2022-10-23 23:51:41 发布
最新推荐文章于 2022-10-23 23:51:41 发布
阅读量3.1k 收藏 1
点赞数
分类专栏： js相关技术问题 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK">
<title>js appendChild removeChild 添加 删除 子节点</title>
<script type="text/javascript">
function createSpan(){
    var span=document.createElement("span");
        span.innerHTML="子节点";
   document.getElementById("content").appendChild(span);
} 
function deleteSpan(){
     var content=document.getElementById("content");
   //var childs=content.childNodes;//ie 和ff 获取子节点不一致(ff会将TEXT_NODE计入在内)
     var childs=content.getElementsByTagName("span"); 
       if(null!=childs){
          content.removeChild(childs[childs.length-1]);
       }
}
</script>
</head>
<body>
<div id='content' style='background-color:#ff0000'>
<span>节点</span>
</div>
<input type='button' οnclick="createSpan()" value="创建节点"/>
<input type='button' οnclick="deleteSpan()" value="删除节点"/>
</body>
</html>

赞就是赞
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
动态操作节点（appendChild()，insertBefore()，removeChild()，replaceChild()）
HaahLeel的专栏
06-25 1674
JS里动态创建元素节点：document.createElement(‘标签名’)； 给一个元素追加一个子元素：当前元素.appendChild(子元素); 在指定的元素前插入新的元素：父级.insertBefore(‘新元素’,’当前元素’)； 删除节点（只能在父级下进行操作）:父级.removeChild(‘要删除的节点’); 替换节点：父级.replaceChild(替换的元素,被替换的元素)
javascript 动态创建元素appendChild,并加入删除操作removeChild
骑着猪猪去拍拖
06-08 2575
javascript 动态创建元素appendChild,并加入删除操作removeChild window.onload = function(){ var oInp = document.getElementsByTagName('input'); var oUl = document.getElementById('ul1'); oInp[1].oncli
[js高手之路] dom常用API详解与应用
weixin_33969116的博客
08-23 242
本文主要讲解DOM常用的CURD操作，appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),cloneNode(克隆节点)的语法与实战应用 一、appendChild: 向元素的内部最后面增加一个节点，或者移动一个现有的节点到元素的内部最...
DOM动态添加HTML节点 appendChild、removeChild
热门推荐
pan_junbiao的博客
07-07 1万+
1、函数语法 createElement(name)：方法可创建元素节点，此方法可返回一个 Element 对象。 appendChild(node)：方法在指定元素节点的最后一个子节点之后添加节点，该方法返回新的子节点。 removeChild(node)：方法可从子节点列表中删除某个节点。 elementNode.childNodes：属性返回包含被选节点的子节点的 NodeList。...
JS--JavaScript节点插入、删除、替换、克隆(appendChild、cloneNode、insertBefore、normalize、removeChild、replaceChild)
吴声子夜歌的博客
09-25 4076
操作节点 Node类型为所有节点定义了很多原型方法，以方便对节点进行操作，其中获得所有浏览器一致支持的方法如下表： Node类型原型方法说明： 方法 说明 appendChild() 向节点的子节点列表的结尾添加新的子节点 cloneNode() 复制节点 hasChildNodes() 判断当前节点是否拥有子节点 insertBefore() 在指定的子节点前插入新的...
DOM节点删除函数removeChild()用法实例
12-30
`removeChild()`是DOM中一个关键的节点操作函数，用于从DOM树中移除指定的子节点。在这个实例中，我们将深入探讨`removeChild()`的用法，并通过具体的代码示例来理解其工作原理。 `removeChild()`函数的基本语法是...
JS简单添加元素新节点的方法示例
10-18
`cloneNode(true)`会深拷贝元素及其所有子节点，`false`则只会浅拷贝元素本身。在示例中，我们克隆了ID为`s`的`<span>`元素，并将其添加到`<div id="d">`的末尾： ```javascript var s = document.getElementById('...
添加和删除HTML节点的简单示例
09-28
- `x.removeChild(x.lastChild)`则移除该元素的最后一个子节点，即删除最后一个添加的`<div>`。 这些操作都是在DOM（Document Object Model）上进行的，DOM是HTML文档的结构化表示，JavaScript可以用来修改DOM，...
删除javascript所创建子节点的方法
12-10
本文将详细讲解如何删除由JavaScript创建的子节点，以及介绍几种常用的DOM操作方法。 首先，让我们回顾一下如何使用JavaScript来创建新的DOM元素。在提供的代码片段中，可以看到一个例子： ```javascript for (var...
javascript删除一个html元素节点的方法
10-25
- `appendChild(node)`: 向父节点的子节点列表末尾添加一个新的子节点。 - `insertBefore(newNode, referenceNode)`: 在指定的子节点之前插入新的子节点。 - `replaceChild(newNode, oldNode)`: 用新的节点替换已...
JavaScript DOM：Node对象、添加子节点、删除子节点
七七的博客
04-17 1503
Node :节点对象 特点: 所有dom对象都可以被认为是一个节点 方法: CRUD dom树: appendChild() :向节点的子节点列表的结尾添加新的子节点。 removeChild() : 删除(并返回)当前节点的指定子节点。 replaceChild() :用新节点替换一个子节点。 属性 parentNode返回节点的父节点。 举例： <!DOCTYPE html...
1.javaScript(JS)常用函数之 appendChild 和removeChild
yuxuan89814的专栏
08-29 4042
javaScript(JS)常用函数之 appendChild 和removeChild
appendChild与removeChild用法和介绍
凡事贵在坚持
10-23 1222
1、这些都是添加节点
createElement、appendChild、removeChild等方法的应用
qq_20777797的博客
12-07 320
制作一个表格，显示班级的学生信息。 要求： 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮，能动态在最后添加一行 3. 点击删除按钮，则删除当前行 new document window.onload = function(){
javaScript appendChild与removeChild添加、移除页面元素
wjxbj的博客
03-23 2156
        在JavaScript中使用appendChild()方法向页面元素中追加子对象和removeChild()方法从页面中移除对象，先看如下的HTML代码： &lt;body&gt; &lt;div id="nw"&gt;&lt;/div&gt; &lt;span id="ch"&gt;&lt;/span&gt; &lt;/body&gt;  
JavaScript基础：动态操作元素（createElement、appendChild、insertBefore、removeChild等方法的应用）
Alley_Olive的专栏
07-07 2608
JavaScript基础：动态操作元素（方法：createElement、appendChild、insertBefore、removeChild，属性：firstChild、lastChild、childNodes）
appendChild,insertBefore,replaceChild,removeChild,cloneNode用法小结
个人前端记录
06-05 1902
1.appendChild() appendChild()用于向childNodes列表的末尾添加一个节点。更新节点后，appendChild()返回新增的节点。 下面的parentNode代表父节点，newNode代表新节点，returnedNode代表appendChild返回的节点 var returnedNode = parentNode.appendChild(newNode); ...
Dom（3）——创建文本节点、元素节点、appendChild()、childNodes及时更新、querySelector、删除.remove()与.removeChild()、克隆
weixin_48796690的博客
10-23 439
Web API之dom（3）——创建文本节点、元素节点、appendChild()、childNodes及时更新、querySelector、删除.remove()与.removeChild()、克隆
【JavaScript】appendChild一个的注意点之会删除原dom树节点
qq_43248623的博客
04-08 1003
最近在研究学习vue原理，其中使用createDocumentFragment()方法，是用来创建一个虚拟的节点对象，那问题来了，创建了虚拟dom树，且最后只渲染了虚拟dom树里面的节点，那原dom树的节点去哪里了，查阅了MDN等相关资料，发现是appendChild在搞搞震。 首先看一下MDN上对appendChild的定义： Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将
removeChild
最新发布
05-29
`removeChild()` 是 JavaScript 中 DOM API 中的一个方法，用于删除 DOM 树中的指定节点。 该方法是作用在父节点上的，需要通过父节点调用该方法来删除其子节点。具体使用方式如下： ```javascript parentElement.removeChild(childElement); ``` 其中，`parentElement` 是要删除子节点的父节点，`childElement` 是要删除的子节点。 调用该方法后，`childElement` 节点将从 DOM 树中被永久性删除。如果需要将该节点移动到其他位置，可以使用 `appendChild()` 或 `insertBefore()` 方法。 需要注意的是，如果要删除的子节点不存在于其父节点中，则会抛出一个错误。因此，在调用 `removeChild()` 方法前，应该先判断该子节点是否存在于其父节点中。 另外，调用 `removeChild()` 方法后，被删除的节点仍然存在于内存中，可以通过其他变量引用该节点。如果要彻底释放该节点，可以将其设置为 `null`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值