JavaScript 技术篇-js语句创建dom节点,并给节点设置属性

简介: JavaScript 技术篇-js语句创建dom节点,并给节点设置属性


document.createElement() 是创建节点的方法。

setAttribute() 是设置属性的方法。

var s_div = document.createElement('div');   // 创建节点
  s_div.setAttribute("id", "copy");   // 设置属性
  s_div.innerText = "吃饭";   // 设置text值
  document.body.appendChild(s_div);   // 添加节点

可用看到效果图:

已经加入到 body 节点里的最下面位置了,而且样式就如我所设置的一样。

image.png

喜欢的点个赞❤吧!


目录
相关文章
|
15小时前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
|
17小时前
|
JavaScript
JS移动端设置mouseover,mouseleave有效么
JS移动端设置mouseover,mouseleave有效么
|
21小时前
|
JavaScript
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的元素数量。通过遍历这个属性,如`for (i=0; i<x.length; i++)`,可以访问和处理每个节点。在示例中,代码加载"books.xml",然后获取所有"title"节点,并打印它们的第一个子节点的值。
|
1天前
|
XML JavaScript 数据格式
XML DOM 节点树
这是一个关于XML DOM节点树的描述,关注点在于第一个子节点和最后一个子节点。示例XML片段包含书籍信息:书名"Giada De Laurentiis",出版年份2005,价格30.00。
|
1天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的节点树。通过循环移动,可以访问并处理每个元素,例如提取值。示例代码展示了一个实例,它加载XML字符串到`xmlDoc`,然后遍历根元素的所有子节点,打印出节点名及文本值,如"title: Everyday Italian"、"author: Giada De Laurentiis"和"year: 2005"。
|
2天前
|
XML JavaScript 数据格式
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的长度,即节点数量。通过它可遍历列表,如`for(i=0; i<x.length; i++)`循环访问每个`title`节点,并输出其内容。示例展示了从"books.xml"加载XML后,获取并打印所有标题节点的值。
|
3天前
|
XML JavaScript 数据格式
XML DOM 节点树
这是一个关于XML DOM节点树的描述,提到了从第一个子节点到最后一个子节点的内容。示例XML片段包含书籍信息:书名"Giada De Laurentiis",出版年份"2005"和价格"30.00"。
|
3天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的节点树。通过示例代码展示了如何使用DOM解析XML,遍历并打印出所有子节点的名称和值,以提取所需信息。实例中,XML数据包含书籍详情,程序逐个输出了这些细节。
|
4天前
|
JavaScript
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的元素数量。通过遍历这个属性,如`for (i=0; i<x.length; i++)`,可以访问和处理每个节点。在示例中,加载"books.xml",然后获取所有"<title>"标签,并输出它们的子节点值。
|
5天前
|
XML JavaScript 数据格式
XML DOM 节点树
这是一个关于XML DOM节点树的描述,提到了从第一个子节点到最后一个子节点的内容。示例XML片段展示了一本书的信息:书名"Giada De Laurentiis",出版年份"2005"和价格"30.00"。

热门文章

最新文章