JS如何替换元素内容

前言

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

原生JS实现

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

function replaceElem() {// get elemvar 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的使用是有差异的

js如何实现随机数的切换

2022-11-02

网站服务器配置-应该选择多大带宽-同时能承载多少用户的访问

2022-11-01

js如何实现阅读完协议后才可以注册

2022-10-31

js如何删除一个元素

2022-10-30

点击“阅读原文”即可查看原文

JS如何替换元素内容相关推荐

JS中修改元素内容，属性，样式的方法【详解】
改变元素内容的方法: .innerHTML=内容(可识别标签) .innerText=内容(只识别文本) 如果把属性作为集合,那么样式就是这个集合 ...
JS如何改变元素内容？
改变元素内容 element.innerText //从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉 element.innerHTML //起始位置到终止位置的全部内容, ...
day57 闭包函数函数提升 BOM操作 js选择器替换元素类属性操作
上节课复习今日内容: 1.作用域变量提升与函数提升 2.BOM操作=>控制浏览器 3.DOM操作=> 控制文档 4.js练习题 5.jquery 01.补充 <!DOCTYPE ...
js如何获取元素内容
<script type="text/javascript"> window.onload = function(){ // 抓取元素 var box = docume ...
原生js获取dom元素内容
<!DOCTYPE html> <html> <body><li><h3> <a href="/corp_index/tec ...
替换元素和非替换元素的学习
替换元素和非替换元素的学习 @(元素)[妙瞳] 引言元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也翻译为"盒子").但是不同的元素显示的方式会 ...
关于JS点击button之灵活替换改变内容方法
<p id="demo"> JavaScript 能改变 HTML 元素的内容. </p> <script> function myFuncti ...
handlebars.js 用 br替换掉内容的换行符
handlebars.js 用 <br>替换掉内容的换行符 JS: Handlebars.registerHelper('breaklines', function(text) { ...
js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别，常用的元素的属性操作，仿电脑系统时间问好，表单元素的属性操作，案例：仿京东显示隐藏密码，样式属性操作
文章目录操作元素改变元素内容有两种方式: interText 和 innerHTML的区别常用的元素的属性操作案例:仿电脑系统时间问好表单元素的属性操作案例:仿京东显示隐藏密码样式属性操 ...

JS如何替换元素内容

分析

JS如何替换元素内容相关推荐

最新文章

热门文章