html dom 修改,HTML DOM

创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您首先必须创建该元素(元素节点)，然后把它追加到已有的元素上。

实例

This is a paragraph.

This is another paragraph.

var para=document.createElement("p");

var node=document.createTextNode("This is new.");

para.appendChild(node);

var element=document.getElementById("d1");

element.appendChild(para);

创建新的 HTML 元素 - insertBefore()

上一个例子中的 appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加。

如果不希望如此，您可以使用 insertBefore() 方法：

实例

This is a paragraph.

This is another paragraph.

var para=document.createElement("p");

var node=document.createTextNode("This is new.");

para.appendChild(node);

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

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

element.insertBefore(para,child);

删除已有的 HTML 元素

如需删除 HTML 元素，您必须清楚该元素的父元素：

实例

This is a paragraph.

This is another paragraph.

var parent=document.getElementById("div1");

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

parent.removeChild(child);

提示：能否在不引用父元素的情况下删除某个元素？

很抱歉。DOM 需要了解您需要删除的元素，以及它的父元素。

这里提供一个常用的解决方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素：

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

child.parentNode.removeChild(child);

替换 HTML 元素

如需替换 HTML DOM 中的元素，请使用 replaceChild() 方法：

实例

This is a paragraph.

This is another paragraph.

var para=document.createElement("p");

var node=document.createTextNode("This is new.");

para.appendChild(node);

var parent=document.getElementById("div1");

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

parent.replaceChild(para,child);

来源：https://www.cnblogs.com/hansonzhe/p/3593722.html

html dom 修改,HTML DOM - 修改相关推荐

DOM（二）——修改内容、属性、样式
文章目录一.修改内容 `元素对象.innerHTML` `元素对象.textContent` `表单元素.value` 二.属性 1.字符串类型的HTML标准属性新DOM方法特例: class属 ...
JAVA:DOM解析XML和修改XML
JAVA:DOM解析XML和修改XML 一:工程结构: 二:类:XMLPARSER package com.demo.xml;import javax.xml.parsers.DocumentBuil ...
减少DOM的获取与修改次数
面试官经常会问你:"平时工作中,你怎么优化自己应用的性能?" 你回答如下:"我平时遵循以下几条原则来优化我的项目.以提高性能,主要有:" a. 减少DOM操作的 ...
html css廖雪峰,廖雪峰js教程笔记12 用DOM更新 innerHMTL 和修改css样式(示例代码)
拿到一个DOM节点后,我们可以对它进行更新. 可以直接修改节点的文本,方法有两种: 一种是修改innerHTML属性,这个方式非常强大,不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段 ...
基于Virtual DOM与Diff DOM的测试代码生成
尽管是在年末,并且也还没把书翻译完,也还没写完书的第一稿.但是,我还是觉得这是一个非常不错的话题--测试代码生成. 当我们在写一些UI测试的时候,我们总需要到浏览器去看一下一些DOM的变化.比如,我们 ...
HTML DOM教程 14-HTML DOM Document 对象
HTML DOM教程 14-HTML DOM Document 对象 1:Document 对象 Document 对象代表整个 HTML 文档,可用来访问页面中的所有元素. Document 对象是 ...
virtual DOM和真实DOM的区别_让虚拟DOM和DOMdiff不再成为你的绊脚石
来源 | https://juejin.im/post/5c8e5e4951882545c109ae9c Keep Moving 时至今日,前端对于知识的考量是越来越有水平了,逼格高大上了各类框架大 ...
【Virtual DOM】虚拟 DOM 和 Snabbdom 库
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读 Virtual DOM 基本介绍什么是 Virtual DOM Virtual DOM(虚拟 DOM),是由普通的的 ...
html中的bom和dom,BOM与DOM的区别
总结:[BOM是浏览器对象模型,用来获取或设置浏览器的属性.行为,例如:新建窗口.获取屏幕分辨率.浏览器版本号等. DOM是文档对象模型,用来获取或设置文档中标签的属性,例如获取或者设置input表单 ...
真实DOM和虚拟DOM
文章目录如何高效操作DOM 什么是DOM 浏览器真实解析DOM的流程为什么说操作DOM耗时如何高效操作DOM 虚拟DOM 什么是虚拟DOM 为什么要有虚拟DOM 虚拟DOM的作用 Vue中的虚拟 ...

html dom 修改,HTML DOM - 修改

html dom 修改,HTML DOM - 修改相关推荐

最新文章

热门文章