js如何替换元素内容

我们网页中元素的内容有的是静态的,有的是动态的,特别是在一些网页交互的网页特效里,应用比较多,如何简单的替换元素的内容

示例展示

原生JS实现

在原生js中主要通过DOM提供的属性去修改的,遵循js的一个使用规范,获取元素，绑定事件，操作DOM

function replaceElem() {
    // get elem
    var myDom = document.getElementById("myDom");
    myDom.innerHTML = '<span>要修改替换的内容</span>'
}

以下是html

<p id="myDom">
    <a>我是一个链接</a>
</p>

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>

分析

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

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

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