在线js拼接html代码,关于js拼接html元素?

你的意思是 小明和 888888这样的学号都是从数据中来的?然后要展现到前端页面中

其实有很多方法:

一. 直接全HTML拼接(你可能想到的方法)

// 假设 有 name 和 xueID 分别代表名字和学号的变量

var HTMLbank='

`+

`

person
`+

`

`+

`

`+name +`

`+

`

`+xueID +`

`+

`

`+

name +`上学校,天天不迟到!`+

`

`+

`

`+

`

`

然后把HTMLbank这样的拼接结果输出到页面中合适位置。如果有多段要拼接,就需要把上一段包装到一个函数中,这样可以通过调用函数一下就获得拼接结果,减少编码,例如

function PJHTMLren( name , xueID){

var HTMLbank='

`+

`

person
`+

`

`+

`

`+name +`

`+

`

`+xueID +`

`+

`

`+

name +`上学校,天天不迟到!`+

`

`+

`

`+

`

`

return HTMLbank

}

二、采用局部刷新来做

比如在页面中已经有了

person

上学校,天天不迟到!

然后有了name和xueID,就可以通过DOM定位id的方法确定到具体的文档元素,然后用实际值去更新来刷新页面达到效果,这里就是查找id为_xm和gc_name的元素,其text内容变成name变量的值,查找id为xhID的元素,其text值用xueID变量值来替换。

三、如果你用了页面模板技术等,还可以根据其模板技术实现方便的内容组装展示,比如利用vue等等的技术来实现。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/563713.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用php 用拼出一个菱形_这可是我没来过的杭州呀!远在开封的他,用一种特殊的方式,拼出一个彩色杭州...

天气晴好的日子,一起骑车出游。西湖,除了美,还有爱情。杭友圈达人“幽默之余”:我并不是杭州人,在河南开封工作,但和杭州,和都市快报,已经有近10年的感情了。因为喜欢摄影&#xff0…

html文字自动消失了,为什么从网页上复制的文字到word上一修改后面的字就自动消失了...

word打字时后面的字会消失是什么原因?如何解决?出现这种问题多半是发生设置错误或误触键盘某些键导致的,由于插入键与退格键距离非常的接近,于是,误触插入键是最常导致这种问题。而导致word打字后面的字会消失由于两方面的原因引起,一是insert键,二是W…

apache license 2.0如何使用防止法律纠纷_Thinkphp + queue 使用队列进行 邮件通知

环境thinkphp5.1redis"topthink/think-queue": "2.0.*"复制代码queue 配置环境 config/queue.php<?php // ----------------------------------------------------------------------// | ThinkPHP [ WE CAN DO IT JUST THINK IT ]// ----------------…

计算机科学与应用考研题,2015年中科院计算机科学综合考研真题

中国科学院大学2015年招收攻读硕士学位研究生入学统一考试试题科目名称&#xff1a;计算机学科综合(专业)考生须知&#xff1a;1&#xff0e;本试卷满分为150分&#xff0c;全部考试时间总计180分钟。2&#xff0e;所有答案必须写在答题纸上&#xff0c;写在试题纸上或草稿纸上…

.net core 正则表达式 获取 等号后面的值_Python3 正则表达式

Python人工智能 - python 人工智能-神经网络 - 创客学院直播室​www.makeru.com.cnPython AI开发实战营 - Day2:Python世界中的封装与异常 - 创客学院直播室​www.makeru.com.cnPython AI开发实战营 - Python开发必备之网络编程 - 创客学院直播室​www.makeru.com.cnpython高级…

html中把句子往右边弄一点咋办,CSS上的左,中,右对齐方法,可以在一行上混合...

一种用CSS以左对齐/中心对齐/右对齐方式显示用HTML编写的句子的方法在用“从左到右书写的语言”(如日语和英语)中编写的HTML中&#xff0c;除非指定了字符移位方向&#xff0c;否则句子左对齐显示。但是&#xff0c;当您想要将标题和标题(居中)居中并发布它们时&#xff0c;这种…

爬壁除锈机器人_浙大研制出除锈爬壁机器人

原标题&#xff1a;浙大研制出除锈爬壁机器人原标题&#xff1a;浙大研制出除锈爬壁机器人本报杭州11月7日电(江南、柯溢能)日前&#xff0c;浙江大学朱世强教授团队研制的除锈爬壁机器人&#xff0c;成功在浙江省舟山市金海船务公司交付使用。这台机器人可替代传统的人工定期除…

如何用计算机装手机系统,如何用手机usb重装电脑系统

随着科技的不断发展&#xff0c;电脑已经成为我们在日常生活中不可或缺的工具&#xff0c;但使用久了难免也会出现些系统故障。这时就需要我们使用u盘重装系统了&#xff0c;可具体要怎么操作呢&#xff1f;想知道的话&#xff0c;就往下来看看我整理的u盘重装电脑系统教程吧。…

在plsql里面怎么去掉空行_PLSQL基本操作手册.doc

PLSQL基本操作手册用PLSQL连接Oracle数据库PLSQL只能用来连接Oracle数据库(不象PB还可以连接JDBC、ODBC)&#xff0c;所以必须首先安装并配置Oracle客户端。初次登录PLSQL&#xff1a;运行PLSQL通过如下界面连接Oracle数据库&#xff1a;Database的下拉列表中自动列出了Oracle客…

js百度地图小车html,H5页面引用百度地图绘制车辆历史轨迹

//打开百度地图function openbMap(){//模拟数据var cars {"car_5":[{"id":1,"order_id":651,"userNane": "王五","userPhoe": "18154679854","driver_id":5,"logistics_id":21,&q…

hybrid7 宝马active_【图】宝马ActiveHybrid7系 动力节能完美结合_汽车之家

当下或者未来的汽车市场开始畅想的主旋律是什么&#xff1f;这个问题只要看看2010年的北京车展就会知道&#xff0c;很多品牌所打出的理念都充分体现了“节能、环保、低碳”&#xff0c;那么可想而知未来的汽车市场必将涌现各式新能源车型。如果说您曾经留意过宝马的广告&#…

计算机英语词汇音频,[听单词] 计算机专业英语词汇音频84,计算机英语单词MP3

eventdriven n.事件驱动的plated film medium n.电镀薄膜记录媒体(电镀薄膜记录介质)writetoread crossfeed n.写读串扰effective radiated power 有效发射功率mixed number n.混合数optical multimode dispersion 光多模分散descriptive error 描述误差secondary terminal add…

aspen怎么做灵敏度分析_不会敲代码怎么做智能分析?用奥威商业智能BI

不会敲代码&#xff0c;怎么学也不会&#xff0c;那怎么做大数据智能分析&#xff1f;说来也简单&#xff0c;用商业智能BI软件就行。拖拉拽就能做报表&#xff0c;点击即可智能分析&#xff0c;即使是没有IT基础&#xff0c;完全不会敲代码的人也能轻松抽取数据做智能分析。商…

能利用计算机来模拟某种真实的实验现象,自然现象或社会现象的课件是,幼儿园课件制作教案...

幼儿园课件制作教案掌握幼儿课件设计制作的内容、方法理解各种课件的教学特点、教学过程及基本结构&#xff1b;会根据教学实际选择课件类型。技能&#xff1a;会使用powerpoint软件制作幼儿园教学课件教学重点&#xff1a;各种课件的教学特点、教学过程及基本结构&#xff1b;…

g楦和h楦的区别_赛事丨“双驰杯”福建鞋类设计师职业技能竞赛暨全国鞋类设计师技能竞赛 福建分赛区选拔赛理论题库(第二部分)...

原标题&#xff1a;赛事丨“双驰杯”福建鞋类设计师职业技能竞赛暨全国鞋类设计师技能竞赛 福建分赛区选拔赛理论题库(第二部分)第二部分运动鞋类题库一、选择题1.运动鞋区别于皮鞋等其他鞋类的标志是在运动鞋的设计和制造过程中应充分考虑(B )A 穿着的舒适性 B运动的特性C 工艺…

计算机应用基础操作题提示,计算机应用基础_操作题文字提示(已经放大了请不要打印).doc...

计算机应用基础_操作题文字提示(已经放大了请不要打印),苹果忘记安全提示问题,app忘记安全提示问题,app提示问题忘记,苹果提示问题忘记,安全提示问题,提示安全证书有问题,ipad忘记安全提示问题,苹果安全提示问题,忘记安全提示问题excel操作题1Excel工作簿&#xff0c;完成以下操…

主流的计算机电源,主流电源评测

如果使用的电源适配器的尺寸属于以下情况&#xff1a;1、太小——提供的电压不足以启动笔记本电脑&#xff0c;则电池指示灯将快速闪烁8次&#xff0c;并在屏幕右下角显示一条通知消息“The output power of the HP Smart AC Adapter connected to your computer is insufficie…

python pexpect输出_关于多线程:如何使用pexpect获取python中子进程的自发输出

这与我使用wx.TextCtrl(或底层GTK )发布的另一个多线程问题有关&#xff0c;在通过从主线程调用GUI交互进行更正后&#xff0c;我发现它再次涉及到管道块缓冲问题。那么如何从subprocess.stdout获得自发输出呢&#xff1f;简而言之&#xff0c;当前我正在使用subprocess.popen启…

为什么定义!doctype html表格高度变高,!DOCTYPE html声明下div高度100%的问题解决方法...

在使用HTML代码创建网页&#xff0c;如果声明了&#xff0c;并且在代码中有div设置了高度为100%&#xff0c;可能会出现显示不正常的情况。比如下面这个代码&#xff1a;Title* {margin:0px;padding:0px;}div {background-color:red;width:200px;height:100%;}显示的结果是:啥都…

已知等价关系求商集_等价关系习题.docx

习题十:等价关系与等价类‘‘1&#xff0e;设R和R是集合A上的等价关系&#xff0c;用例子证明R R不一定是等价关系。2&#xff0e;试问由4个元素组成的有限集上所有的等价关系的个数为多少3&#xff0e;给定集合S&#xff5b;1&#xff0c;2&#xff0c;3&#xff0c;4&#…