js如何替换元素内容

# js如何替换元素内容

# 快速导航

# 前言

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

# 具体示例

https://tv.itclan.cn

# 原生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>