JS中DOM的创建方法

最新推荐文章于 2024-01-05 15:27:39 发布
最新推荐文章于 2024-01-05 15:27:39 发布
阅读量5.5k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huyang1597535/article/details/8218940
版权

1、createElement（）创建节点

2、appendChild()方法可向节点的子节点列表的末尾添加新的子节点

3、createTextNode()可创建文本节点

        js Dom方法的实例：

                创建一个图层，并且在该图层中显示出“abcd”文字

              步骤：

               （1）、创建该图层的节点（createElement）

                (2)、设置该图层的长和宽以及背景（利用style属性）

                （3）、设置该图层id的属性

               （4）、将图层添加到body中（使用document.body.appendChild）

                 （5）、创建文本节点（利用createTextNode创建文本节点）

                  （6）、将文本添加到创建的div中

                <!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>
                 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>无标题文档</title>
                      <script type="text/javascript" language="javascript">
                           function showDiv(){
                               //js 的 Dom操作类似于php Dom操作xml
                              //创建一个元素，元素是元素名
                              var new_div=document.createElement("div");
                            //给div设置大小和颜色，通过他的style属性来获得，但是设置具体的某个属性还是要根据具体的属性名来设置
                              new_div.style.width="100px";
                             new_div.style.height="100px";
                             //如果某个属性是由多个属性组成的话，采用驼峰法
                              new_div.style.backgroundColor="red";
                              new_div.id="div1";
                               //确定位置
                              document.body.appendChild(new_div);
                               var text =  document.createTextNode("adcd");
                                  new_div.appendChild(text);
                                     //alert(document.getElementById("div1").nodeName);
    
                                  }

                      </script>
                     </head>
                        <body>
                            <input type="button" value="点击" οnclick="showDiv()" />
                         </body>
                      </html>

huyang1597535
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生JS DOM操作方法汇总
weixin_34405557的博客
01-09 681
创建节点 1. document.createElement(tagname) 创建一个由tagName决定的HTML元素 2. document.createTextNode(data) 创建一个文本节点，文本内容为data 3. document.createDocumentFragment() 创建一个空白的文档片段。文档片段是 DocumentFragment 对象的引用。是DOM节点，但...
javascript Dom方法
zhangjinlei00的专栏
11-14 553
1、createElement（）创建节点 2、appendChild()方法可向节点的子节点列表的末尾添加新的子节点 3、createTextNode()可创建文本节点         js Dom方法的实例：                 创建一个图层，并且在该图层中显示出“abcd”文字               步骤：                （1）、创建该图层的节点
创建 DOM 元素的几种方式
angry_rooster的博客
06-23 8072
通过write()、createElement()和innerHTML创建元素 document.write() document.write()是向文档写入内容，参数是一个包含要写入文档的文本的字符串 document.write(markup); 类似的还有一个document.wirteln()，只是最后紧跟一个换行符 如果字符串中有标签元素，会被识别为标签元素，并在文档中创建一个对应元素节点 但如果在文档加载完毕后才调用document.write()，则会重写整个文档，将之前所有的内容覆盖
带你彻底学会JS DOM技术之创建，插入元素
大河之犬的博客
10-06 4213
所谓的“动态DOM”，指的是使用JavaScript创建的元素。来创建一个文本节点，然后可以将元素节点与文本节点“组装”成我们平常看到的“有文本内容的元素”。方法把已经创建好的“有内容的strong元素”插入到div元素中，这时才会显示出内容。动态创建了一个strong元素，但是此时strong元素是没有内容的。//将strong元素插入div元素（这个div在HTML已经存在）方法将一个新元素插入到父元素中的某一个子元素“之前”A表示父元素，B表示新子元素。把一个新元素插入到父元素的内部子元素的“末尾”
js基础知识（二十七）--DOM对象的创建、插入
weixin_47928499的博客
08-08 3095
DOM对象的创建、插入
js常见的DOM操作
zxl1990_ok的博客
05-27 488
创建新节点： createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 添加、移除、替换、插入 appendChild() removeChild() replaceChild() insertBefore() //在已有的子节点前插入一个新的子节...
JS动态创建DOM元素的方法
10-24
主要介绍了JS动态创建DOM元素的方法,涉及javascript动态创建DOM元素及DOM元素事件绑定与删除的相关技巧,需要的朋友可以参考下
JavaScript中 DOM操作方法小结
10-19
本篇文章主要介绍了JavaScript中 DOM操作方法小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript实现获取dom中class的方法
12-09
本文实例讲述了JavaScript实现获取dom中class的方法。分享给大家供大家参考。具体实现方法如下： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></...
vue 中Virtual Dom被创建的方法
12-10
本文将通过解读render函数的源码，来分析vue中的vNode是如何创建的。在vue2.x的版本中，无论是...render方法定义在文件 src/core/instance/render.js 中 Vue.prototype._render = function (): VNode { const vm:
javascript实现dom动态创建省市纵向列表菜单的方法
10-24
主要介绍了javascript实现dom动态创建省市纵向列表菜单的方法,可实现省市列表菜单效果,涉及javascript鼠标事件及页面处理json数据的技巧,需要的朋友可以参考下
js之DOM学习三种创建元素的方式
m0_61547956的博客
04-21 1613
document.write() 了解 直接将内容写入页面的文档流，但是文档流执行完毕，会导致页面重绘，重新创建一个新的页面，只有新写入的这个元素，只有div了执行了之后 var btn = document.querySelector('button'); btn.onclick = function() { document.write('<div>123</div>'); } innerHTML 创建多个元素效
JS的DOM对象创建元素
05-31 276
在JavaScript中，我们可以使用createElement（ ）来创建一个元素节点，也可以使用createTextNode（ ）来创建一个文本节点，然后可以将元素节点与文本节点“组装”成我们平常看到的“有文本内容的元素”。这种方式又被称为“动态DOM操作”。所谓的“动态DOM”，指的是使用JavaScript创建的元素。这个元素一开始在HTML中是不存在的。
虚拟DOM的两种创建方法、真实DOM和虚拟DOM
m0_68997646的博客
10-20 1143
虚拟DOM的两种创建方法、真实DOM和虚拟DOM
js 创建dom的几种方式
最新发布
stpzhf的博客
01-05 443
【代码】js 创建dom的几种方式。
JavaScript如何创建一个DOM元素
qq_54334713的博客
04-26 873
前言： HTML元素通常是由元素节点和文本节点组成 基础方法： document.createElement() 创建元素节点 document.createAttribute() 创建一个属性节点 document.createTextNode() 创建文本节点 appendChild() 向节点的子节点列表的末尾添加或者删除子节点建 运用： //创建h1标签 var h=document.createElement("H1")...
JS逆向之浏览器补环境(一)
热门推荐
Wxc的Blog
03-16 1万+
JS逆向之浏览器补环境(一) 简介 今天分享是是浏览器环境检测以及node js补环境 我们点击检测设备信息看发出的请求，可以看到是sign和data 这个data看起来像base64,我们试一下，发现不是 分析加密位置 可以看到经过混淆了 我们选中看一下 那我们接下来就知道了，要逆向的两个参数变量 _0x392f2d _0xd9e63f 我们直接把整个文件拷贝到webstrom里，看一下这两个变量在哪里定义的，可以看到在这 由于我们只需要这两个变量，所以下面的代码可以删除了，变成这样
3. 虚拟DOM的两种创建方式，虚拟DOM与真实DOM
weixin_43893483的博客
06-19 293
2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在使用，无需真实DOM上这么多的属性。3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。1.虚拟DOM本质是Object类型的对象（一般对象）打印输出虚拟DOM和真实DOM进行比较。
JS DOM基础以及元素创建的三种方式
sunhaomei的博客
05-14 2666
节点：页面中所有的内容都是节点（标签，属性，文本，空格，换行） 文档：document---页面中的顶级对象 元素：页面中的所有标签 标签---元素---对象（通过DOM的方式来获取这个标签，得到了这个对象，此时这个对象叫DOM对象） 节点的属性：作用，为了将来获取很多节点，得到节点中的标签（元素），识别节点中的标签元素 节点的类型：1标签节点，2属性节点，3文本节点 nodeTyp...
js创建dom元素方法
04-27
JavaScript 创建 DOM 元素的方法有多种，以下是其中几种常见的方法： 1. 使用 document.createElement() 方法创建元素节点，例如： ``` var newDiv = document.createElement("div"); ``` 2. 使用 document....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值