如何用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=“新文本内容”
相关文章
|
4天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
10 0
|
23天前
|
JavaScript 前端开发 Java
springboot从控制器请求至页面时js失效的解决方法
springboot从控制器请求至页面时js失效的解决方法
15 0
springboot从控制器请求至页面时js失效的解决方法
|
23天前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
11 1
|
1月前
|
JavaScript 前端开发
JavaScript如何遍历表单元素?
JavaScript如何遍历表单元素?
|
1月前
|
Web App开发 前端开发 JavaScript
编程笔记 html5&css&js 004 我的第一个页面
编程笔记 html5&css&js 004 我的第一个页面
|
23天前
|
JavaScript 前端开发
springboot+layui从控制器请求至页面时js失效的解决方法
springboot+layui从控制器请求至页面时js失效的解决方法
15 0
|
12天前
|
JavaScript 前端开发
JS:如何创建新元素并添加到页面中
JS:如何创建新元素并添加到页面中
21 1
|
30天前
|
JSON JavaScript 前端开发
JavaScript随手笔记---数组中相同的元素进行分组(数据聚合) groupBy函数
JavaScript随手笔记---数组中相同的元素进行分组(数据聚合) groupBy函数
|
1月前
|
JavaScript 前端开发
JS获取DOM元素的八种方法(含代码,简单易懂)
JS获取DOM元素的八种方法(含代码,简单易懂)
|
1月前
|
移动开发 HTML5
编程笔记 html5&css&js 024 HTML表单元素
编程笔记 html5&css&js 024 HTML表单元素