JS如何替换元素内容

itclanCoder

发布于 2022-12-07 09:47:33

10.7K0

发布于 2022-12-07 09:47:33

http://mpvideo.qpic.cn/0bc3eaajwaaa4qaelx3bjvrvaigdtmqabgya.f10002.mp4?dis_k=4cf17def14cb58de5ca3ebc1606d41c2&dis_t=1670377618&vid=wxv_2646876504282578945&format_id=10002&support_redirect=0&mmversion=false

前言

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

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