js 动态生成html 触发事件传参字符转义的实例

通常，在使用 JS 动态生成 html 的过程中，会嵌入相应的样式、事件等属性元素，而这时经常会出现所谓的 “单、双引号不够用” 的情况，别急，这时可以利用 html 语言中的转义字符来解决。

下面就来介绍一下相应的转义字符吧：

& —— (ampersand) 转义字符对应为   &

“   —— (double quote) 双引号，转义字符对应为  "

'  —— (single quote)单引号，转义字符对应为  '

<  —— (less than) 小于号，转义字符对应为   <

>  —— (greater than) 大于号，转义字符对应为  >

例如，在 js 中：

var html = "<div onclick='orderIt(&#039"+food.picture+"&#039)'>点击它</div>";

则对应生成的 html 就为：

<div onclick=”orderIt('price')">点击它</div>

以上这篇js 动态生成html 触发事件传参字符转义的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript asp教程第二课--转义字符

    javascript asp教程第二课--转义字符

    并非是题外话:我们在第二课中要讲到的"转义字符"看起来与我们的课程并没有关系.事实并非如此.转义字符是在 asp中使用javascript的一个完整部分.而第二课要讲的恰恰就是转义字符.没有转义字符,那么你为了 写出有效率的asp脚本将会遇到许多的困难.抱歉,下面进入正题:以下是第二课的asp脚本.还记不记得在第一课的列子中,我们怎样编写了一个html输出都在同一行的代码.转义字符允许我们增加 换行符号.下面是我们上边例子在客户端html输出页面的代码:换行符:我又在下面重新打了一行a

  • js转义字符介绍

    "<" 转义 :"<" ">" 转义 :">"

  • Javascript 八进制转义字符(8进制)

    摸索过程中,看见这样的字符:"\155",用来代替字符"m".为什么?....完全不知道原因,整个人顿时慌了!可别说自己4年的经验了!"\155"和"m"是全等的,到现在,2011年了我才知道,深感惭愧! 对于字符转义,常见的大概如下: "\u5230" ==> "到" "\t" ==> horizontal tab "\u0009"

  • 转义字符（\）对JavaScript中JSON.parse的影响概述

    按照ECMA262第五版中的解释,JSON是一个提供了stringify和parse方法的内置对象,前者用于将js对象转化为符合json标准的字符串,后者将符合json标准的字符串转化为js对象.json标准参考<a href="http://json.org/" target="_blank">json.org</a>.(其实将符合json标准的字符串转化为js对象可以用eval,但是eval性能相对差且存在安全隐患(会执行json字符串中

  • js 动态生成html 触发事件传参字符转义的实例

    通常,在使用 JS 动态生成 html 的过程中,会嵌入相应的样式.事件等属性元素,而这时经常会出现所谓的 "单.双引号不够用" 的情况,别急,这时可以利用 html 语言中的转义字符来解决. 下面就来介绍一下相应的转义字符吧: & -- (ampersand) 转义字符对应为   & "   -- (double quote) 双引号,转义字符对应为  " '  -- (single quote)单引号,转义字符对应为  ' <  -- (l

  • 微信小程序实现bindtap等事件传参

    微信小程序实现bindtap等事件传参

    之前一直以为微信小程序按钮点击事件传参是和web端相同,即在事件中写明所传递的参数即可,但是这样尝试过以后发现小程序的控制台报错,报所写的bindtap中参数错误,之后百度发现,小程序按钮点击这类事件时一般的处理方法是指明元素所在的id,bindtap只是写明函数名,例如,bindtap='setNumber',而不是bindtap='setNumber(1)',在js中只要写function(e).通过e可以获取所传过来元素的所有信息. 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将

  • vue动态路由配置及路由传参的方式

    动态路由: 当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个"共用"的组件,并且还要传参数,渲染不同的数据 这就要用到动态路由跟路由传参了! 首先我们来了解下router-link这个组件: 简单来说,它是个导航器,利用to属性导航到目标组件,并且在渲染的时候会自动生成一个a标签,当然官方也有说明,加个tag标签属性就可以渲染不同的标签,可以浏览器端查看到 并且当一个导航器被激活的时候,会自动加上一个css的激活样式,可以全局在路

  • echarts.js 动态生成多个图表 使用vue封装组件操作

    组件只做了简单的传值处理,记录开发思路及echarts简单使用. 这里默认所有图表样式一致,都为柱状图,如需其他类型,可查阅echarts官网文档,再动态传值即可. vue 使用组件 ------在外层用v-for 循环,传不同值进charts 即可 <!-- 传入对应的数据给子组件 --> <charts :options="item.select" :id='"charts" +index' :index="index" s

  • 一文带你了解微信小程序数据绑定、事件绑定以及事件传参、数据同步

    目录 数据绑定 基本原则 在data中定义数据 Mustache语法 Mustache语法的应用 绑定内容 绑定属性 运算(三元运算.算术运算等) 事件绑定 什么是事件? 常用事件 事件对象属性 target与currentTarget的区别 bindtap语法格式 在事件处理函数中为data赋值 事件传参 查看参数 bindinput语法格式 实现文本框与data之间的数据同步 总结 数据绑定 基本原则 在data中定义数据 在WXML中使用数据 在data中定义数据 在页面对应的.js 文件

  • 关于动态生成dom绑定事件失效的原因及解决方法

    之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试了一下: 1. 事件失效的原因: (1)bind事件绑定只对dom中存在的元素有效,对于我们后来动态增加的元素是监测不到,所以绑定不了 (2)同样,当你使用var aa = document.getElementsByTagName("动态生成的元素");来获取动态生成的元素的时候也是获取

  • 对vue下点击事件传参和不传参的区别详解

    如下所示: <div id = 'app'> <p><button @click = 'test_click1'>{{btn_text1}}</button></p> <br> <p><button @click = 'test_click2("123")'>{{btn_text2}}</button></p> </div> <script src=

  • React组件内事件传参实现tab切换的示例代码

    React组件内事件传参实现tab切换的示例代码

    本文介绍了React组件内事件传参实现tab切换的示例代码,分享给大家,具体如下: 组件内默认onClick事件触发函数actionClick, 是不带参数的, 不带参数的写法: 如onClick= { actionItem } 带参数的写法, onClick = { this.activateButton.bind(this, 0) } 下面是一个向组件内函数传递参数的小例子 需求: 在页面的底部, 有四个按钮, 负责切换内容, 当按钮被点击时, 变为激活状态, 其余按钮恢复到未激活状态 分析

  • js 动态生成json对象、时时更新json对象的方法

    函数不需要 return,因为 json 对象会被函数直接修改. var str1 = {"name": "apple", "sex": "21"}; // 参数:prop = 属性,val = 值 function createJson(prop, val) { // 如果 val 被忽略 if(typeof val === "undefined") { // 删除属性 delete str1[prop]

  • JS动态给对象添加事件的简单方法

    WEB项目中,我们常常会碰到要动态对相应的对象添加事件,如下,有id="txtPrice"的文本框控件: <div> <input type="text" id="txtPrice" name = "txtPrice" value = "0"/> <div> 现在我们为其动态添加一事件,JS核心代码如下: document.getElementById("txt

随机推荐