# 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

以下是html

<p id="myDom">
    <a>我是一个链接</a>
</p>
1
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

# 分析

在原生js当中,innerHTMLDOM元素对象一个非常重要的属性,可以获取元素整个节点的内容,包括标签元素,表示元素的所有内容,包括子元素,文本等

注意要与innerText区分,innerText只可以获取文本节点内容,如果仅是修改DOM元素节点文本内容,使用innerText也是可以的

而在vue里面,并不是通过操作DOM去实现的,而是操作数据,通过操作数据实现的,与原生js的使用是有差异的

白色

关注公众号

一个走心,有温度的号,同千万同行一起交流学习

加作者微信

扫二维码 备注 【加群】

扫码易购

福利推荐