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

喜欢的点个赞❤吧!


目录
相关文章
|
2月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
1月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
1月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
1月前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
1月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
2月前
|
Web App开发 JavaScript 前端开发
Node.js:JavaScript世界的全能工具
Node.js:JavaScript世界的全能工具
|
前端开发 JavaScript
探索JavaScript元素节点的属性和方法
探索JavaScript元素节点的属性和方法
40 0
|
7月前
|
前端开发 JavaScript
探索JavaScript元素节点的属性和方法
探索JavaScript元素节点的属性和方法
35 0
|
JavaScript 前端开发
前端祖传三件套JavaScript的DOM之节点层次、类型、属性
随着互联网的不断发展,前端技术也在不断地更新迭代。但是,无论怎么更新变化,JavaScript、DOM、CSS 三件套的重要性始终不可替代。其中,JavaScript 的作用尤为关键。本文将聚焦于 JavaScript 中的 DOM,讨论节点层次、类型和属性等概念。
154 0
|
JavaScript 前端开发
Javascript 节点属性
Javascript 节点属性
90 0