DOM之创建节点create系列

已于 2023-03-05 14:28:06 修改
阅读量223 收藏
点赞数
文章标签： javascript
于 2023-03-05 14:12:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42547120/article/details/129345264
版权

document.createElement('元素名');    // 创建新的元素节点,参数不区分大小写

document.createAttribute('属性名');   // 创建新的属性节点

document.createTextNode('文本内容'); // 创建新的文本节点

document.createComment('注释节点'); // 创建新的注释节点

document.createDocumentFragment( ); // 创建文档片段节点

文档节点（document）——整个HTML文档document对象作为window对象的属性存在的，我们不用获取可以直接使用。

元素节点（Element）——HTML文档中的HTML标签。

属性节点（Attribute)——元素的属性 表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。

文本节点（Text）——HTML标签中的文本内容。

DocumentType——doctype标签（比如<!DOCTYPE html>）。

Comment——注释

DocumentFragment——文档的片段

var div = document.createElement('div');
var text = document.createTextNode('文本节点');
var comment = document.createComment('注释');
div.appendChild(comment);
div.appendChild(text);
document.body.appendChild(div);

// 文档碎片节点
var fragment = document.createDocumentFragment();
fragment.appendChild(div);
document.body.appendChild(fragment);

var element = document.getElementsByTagName('div')[0];
// 添加属性节点
var attr = document.createAttribute('id');
attr.value = 'idValue';
element.setAttributeNode(attr);

执行结果为

 DOM节点操作-CSDN博客

在末尾添加节点 node.appendChild(child)

在指定元素之前插入一个元素 node.insertBefor(child,指定元素)

删除元素 node.removeChild(child)

克隆元素

   node.cloneChild()/ node.cloneChild(false) ===>浅克隆

   node.cloneChild()/ node.cloneChild(true) ===>深克隆

  
 

qq_42547120
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
create:用于创建虚拟 DOM 节点的语法糖
06-13
用于创建受启发的虚拟 DOM 节点的语法糖。 安装 使用 : packin add jsiom/create 然后在您的应用中： var Text = require ( 'create/text' ) var Node = require ( 'create/node' ) var create = require ( '...
创建 DOM 元素的几种方式
angry_rooster的博客
06-23 8154
通过write()、createElement()和innerHTML创建元素 document.write() document.write()是向文档写入内容，参数是一个包含要写入文档的文本的字符串 document.write(markup); 类似的还有一个document.wirteln()，只是最后紧跟一个换行符 如果字符串中有标签元素，会被识别为标签元素，并在文档中创建一个对应元素节点 但如果在文档加载完毕后才调用document.write()，则会重写整个文档，将之前所有的内容覆盖
document节点创建页面元素
不甜呐的博客
05-21 3262
1.createElement()方法 描述：本方法用来在内存中创建一个页面元素 语法：var 变量名 = document.createElement("标签名"); 注意：本方法创建的页面元素并不会直接显示在页面中，而是默认存在于内存中 兼容性：五大主流浏览器都支持 2.createTextNode()方法 描述：本方法可创建文本节点 语法：var 变量名 = document.createTextNode(text); 兼容性：五大主流浏览器都...
在created中创建dom操作的方法是什么？
最新发布
m0_74265396的博客
01-05 404
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数。使用Vue.nextTick()是什么？
在created钩子函数中对DOM进行操作
only_zing的博客
03-06 995
created这个阶段和在mounted阶段进行初始化有什么区别；ref是什么；$nextTick的作用；在created钩子函数中对DOM进行操作
DOM节点的创建
weixin_54664933的博客
06-17 1465
打开开发工具后直接新建项目，添加视图和控制器。添加好后回到视图插入写jQquery代码时需要的插件。 我们先说DOM节点的创建。创建节点以及节点属性的过程比较简单。1.创建节点（常见的：元素、属性和文本）。2.添加节点的一些属性（当然你可以选择不添加，没有要求必须填）。3.加入文档中。在这三个流程中我们回合涉及到一点方法比如：创建元素document.createElement、设置元素：setAttribute、添加文本：innerHTML、加入文档：appendChild。 我们先直接在页面上创建几个节
原生js实现针对Dom节点的CRUD操作示例
01-19
本文实例讲述了原生js实现针对Dom节点的CRUD操作。分享给大家供大家参考，具体如下： 知识点，依然会遗忘。我在思考到底是什么原因。...dom提供了api用于创建节点常用有 var div=document.createEl
vdom:vtree的DOM创建和修补算法
05-18
给定一个表示DOM结构的vtree结构，我们要么使用vdom/create-element将该结构呈现给DOM节点，要么想要通过使用vdom/patch修补DOM来使用vtree/diff的结果更新DOM。 该模块当前正在从virtual-dom重新导出vdom ，但目的...
DOM-Library:原始码查看
03-23
dom.create(`<div><span>chuangjian</span></div>`) 创建弟弟节点(原节点后面新增一个节点) dom.after(node,node2) 创建哥哥节点（原节点前面新增一个节点） dom.before(node,node2) 新增儿子节点 dom.append(parent...
create-dom99-app:为前端Web开发提供了一个有思想的入门包
05-28
创建dom99应用 为前端Web开发提供了一个有思想的入门包 适用于静态单页应用程序。 开始准备文件和结构。 包含什么 应用架构 DOM操作 林亭 测验 开发过程中的零秒编译时间 在开发时，由于使用了ES模块，因此无需运行...
节点操作以及创建元素的三种方式
m0_74913905的博客
03-24 111
如何创建元素的三种方式
JS之DOM操作--概述、document节点属性、document节点选中页面元素、document节点创建页面元素和属性、操作页面元素属性、操作元素内容、节点操元素样式
小白小白从不日别的博客
04-12 1663
DOM
创建dom标签公共方法
萌萌的土拨鼠
09-29 174
/** * 创建dom标签公共方法 * @param dom * @param obj * @param text * @returns {any} */ function createDom(dom, obj, text) { var dom = document.createElement(dom); if (obj != null) { //获取...
创建DOM新节点
iteye_5722的博客
03-03 235
一 介绍 创建新的节点先通过使用文档对象中的createElement()方法和createTextNode()方法，生成一个新元素并生成文本节点，然后通过使用appendChild()方法将创建的新节点添加到当前节点的末尾处。 appendChild()方法将新的子节点添加到当前节点的末尾。 obj.appendChild（newChild） newChild：表示新的子节点。   ...
白菜还木棒
weixin_71146477的博客
06-17 805
vue生命周期 nextTick vuex vuex语法糖
DOM节点左右移动
weixin_34354945的博客
11-20 515
闲来没事写了个小demo，原本是回答别人博问的，有人比我更快的给出了链接，想想半途而废也不好，就写完了，写个博文记录一下（效果是按照我自己来的，可能和最早别人问的不太一样，反正无关紧要啦） 直接上code： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">...
DOM创建元素节点.获取节点
weixin_66171880的博客
02-02 1895
1.每点击一下去创建一个节点元素：案例如下 <div id="wrap"></div> <script> let oWrap = document.querySelector("#wrap"); // 每在页面上点1下，都在wrap内生成一个 div，每个div的背景色都是随机的 // wrap里每个div节点，都能绑定1个点击事件，点击时，可以打印自身 document.documentElem..
React中createElement创建虚拟DOM
qq_38515884的博客
09-20 438
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./lib/react.development.js"></script> <script src="./lib/react-dom.development.js">
关于js_document对象中的获取元素，创建元素的方法
qq_55961861的博客
08-12 1930
关于js_document对象中的获取元素，创建元素的方法！
dom4j 创建多个根节点
05-10
在 XML 中，只能有一个根节点，因此 dom4j 不支持创建多个根节点。如果你需要创建多个根节点，则需要将它们放在一个父节点下。例如，下面是一个示例代码，创建一个名为 "root" 的父节点，然后在其中添加两个子节点 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值