如何用js在页面中添加元素?

简介: 如何用js在页面中添加元素?

想要在页面动态添加元素,首先要确定在哪个元素后面添加元素,然后利用js的appendChild方法在该元素后面追加元素。

1.获取父节点元素

let body=document.getElementsByTagName('body')[0]。

2.然后动态创建a标签

let a=document.createElement('a')。

3.把创建好的a标签追加到body下面

body.appendChild(a)。

4.在a标签里面添加文本内容

a.innerHTML='这是一个链接'。

5.给a标签添加一个链接

a.href='https://www.baidu.com/'。

js一些原生方法

element.appendChild()方法向节点添加最后一个子节点。

element.appendChild(要添加进去的节点)

element.innerHTML设置或返回元素的内容。

element.innerHTML=“新文本内容”
相关文章
|
15天前
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
31 5
|
6天前
|
JavaScript 前端开发
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
|
8天前
|
JavaScript 前端开发
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
21 2
|
8天前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
19 2
|
16天前
|
JavaScript 前端开发 API
js全屏,监听页面是否全屏
js全屏,监听页面是否全屏
32 4
|
27天前
|
JSON JavaScript 前端开发
震惊!JS如何悄无声息追踪你的每一步?揭秘页面访问与关闭的超级上报大法,让数据说话,优化体验不再难!
【8月更文挑战第4天】在Web开发中,跟踪用户行为对提升体验与留存至关重要。本文以在线学习平台为例,介绍如何用JavaScript监听页面访问及关闭,并上报数据。通过`window.onload`监测页面加载,记录用户访问;利用`navigator.sendBeacon`在用户离开时发送少量数据至服务器,无需担心请求失败。需注意隐私合规、性能影响及浏览器兼容性。此技术有助于深入理解用户行为,为产品迭代提供依据。
40 8
|
16天前
|
JavaScript 前端开发
js如何渲染页面内容
js如何渲染页面内容
22 0
|
16天前
|
JavaScript Java
分别使用java script和jQuery添加页面元素
分别使用java script和jQuery添加页面元素
18 0
|
16天前
|
JavaScript 前端开发
JavaScript 改变 HTML 元素
JavaScript 改变 HTML 元素
28 0
|
16天前
|
前端开发 JavaScript
JavaScript 获取 HTML 元素方法
JavaScript 获取 HTML 元素方法
25 0
下一篇
云函数