# js如何替换元素内容
# 快速导航
# 前言
我们网页中元素的内容有的是静态的,有的是动态的,特别是在一些网页交互的网页特效里,应用比较多,如何简单的替换元素的内容
# 具体示例
# 原生JS实现
在原生js
中主要通过DOM
提供的属性去修改的,遵循js
的一个使用规范,获取元素,绑定事件,操作DOM
//
function replaceElem() {
// get elem
var myDom = document.getElementById("myDom");
myDom.innerHTML = '<span>要修改替换的内容</span>'
}
1
2
3
4
5
6
2
3
4
5
6
以下是html
<p id="myDom">
<a>我是一个链接</a>
</p>
1
2
3
2
3
# Vue代码实现
<template>
<div class="wrap">
<div class="input-wrap">
<el-input placeholder="请输入内容" v-model="input" clearable></el-input>
<el-button slot="append" @click="handleReplace">替换元素</el-button>
</div>
<div><el-link type="primary" :href="url">{{url}}</el-link></div>
</div>
</template>
<script>
export default {
name: "replaceElem",
data() {
return {
input: '',
url:'https://tv.itclan.cn'
}
},
methods: {
handleReplace() {
if(this.input) {
this.url = this.input;
this.input = '';
}else {
this.$message.error('输入框内不能为空');
}
}
}
}
</script>
<style lang="scss" scoped>
.wrap {
width: 400px;
text-align: center;
margin: 20px auto;
}
.input-wrap {
display:flex;
justify-content: center;
margin-bottom: 20px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
# 分析
在原生js
当中,innerHTML
是DOM
元素对象一个非常重要的属性,可以获取元素整个节点的内容,包括标签元素,表示元素的所有内容,包括子元素,文本等
注意要与innerText
区分,innerText
只可以获取文本节点内容,如果仅是修改DOM
元素节点文本内容,使用innerText
也是可以的
而在vue
里面,并不是通过操作DOM
去实现的,而是操作数据,通过操作数据实现的,与原生js
的使用是有差异的
分享
留言
解答
收藏