博客
关于我
JavaScript HTML DOM 元素(节点)
阅读量:211 次
发布时间:2019-02-28

本文共 803 字,大约阅读时间需要 2 分钟。

添加和删除节点(HTML 元素)

创建新的 HTML 元素

要向 HTML DOM 中添加新元素,您需要先创建该元素(元素节点),然后将该元素追加到已有元素中。

实例

以下代码创建了一个新 p 元素,并添加了一个文本节点:

var para = document.createElement("p");var node = document.createTextNode("这是新段落。");para.appendChild(node);

然后将新元素追加到已有元素中:

var element = document.getElementById("div1");element.appendChild(para);

删除已有的 HTML 元素

要删除 HTML 元素,您需要先获得该元素的父元素。

实例

以下代码删除了 id="p1" 的 p 元素:

var parent = document.getElementById("div1");var child = document.getElementById("p1");parent.removeChild(child);

或者,您可以直接通过子元素的 parentNode 属性删除:

var child = document.getElementById("p1");child.parentNode.removeChild(child);

HTML DOM 教程

在我们的 JavaScript 教程的 HTML DOM 部分,您已经学到了:

  • 如何改变 HTML 元素的内容 (innerHTML)
  • 如何改变 HTML 元素的样式 (CSS)
  • 如何对 HTML DOM 事件作出反应
  • 如何添加或删除 HTML 元素

如果您希望学习更多关于使用 JavaScript 访问 HTML DOM 的知识,请访问我们完整的 JavaScript教程

转载地址:http://xxes.baihongyu.com/

你可能感兴趣的文章
Numpy如何使用np.umprod重写range函数中i的python
查看>>
numpy数组替换其中的值(如1替换为255)
查看>>
numpy数组索引-ChatGPT4o作答
查看>>
numpy转PIL 报错TypeError: Cannot handle this data type
查看>>
NutzCodeInsight 2.0.7 发布,为 nutz-sqltpl 提供友好的 ide 支持
查看>>
NUUO网络视频录像机 css_parser.php 任意文件读取漏洞复现
查看>>
NVelocity标签使用详解
查看>>
nvidia-htop 使用教程
查看>>
oauth2-shiro 添加 redis 实现版本
查看>>
OAuth2.0_JWT令牌-生成令牌和校验令牌_Spring Security OAuth2.0认证授权---springcloud工作笔记148
查看>>
OAuth2.0_JWT令牌介绍_Spring Security OAuth2.0认证授权---springcloud工作笔记147
查看>>
OAuth2.0_介绍_Spring Security OAuth2.0认证授权---springcloud工作笔记137
查看>>
OAuth2.0_完善环境配置_把资源微服务客户端信息_授权码存入到数据库_Spring Security OAuth2.0认证授权---springcloud工作笔记149
查看>>
OAuth2.0_授权服务配置_Spring Security OAuth2.0认证授权---springcloud工作笔记140
查看>>
OAuth2.0_授权服务配置_令牌服务和令牌端点配置_Spring Security OAuth2.0认证授权---springcloud工作笔记143
查看>>
OAuth2.0_授权服务配置_客户端详情配置_Spring Security OAuth2.0认证授权---springcloud工作笔记142
查看>>
OAuth2.0_授权服务配置_密码模式及其他模式_Spring Security OAuth2.0认证授权---springcloud工作笔记145
查看>>
OAuth2.0_授权服务配置_资源服务测试_Spring Security OAuth2.0认证授权---springcloud工作笔记146
查看>>
OAuth2.0_环境介绍_授权服务和资源服务_Spring Security OAuth2.0认证授权---springcloud工作笔记138
查看>>
OAuth2.0_环境搭建_Spring Security OAuth2.0认证授权---springcloud工作笔记139
查看>>