jquery动态创建元素同时设置属性（转义字符遇到的问题）

最新推荐文章于 2024-02-04 18:17:01 发布

每天进步一点.

最新推荐文章于 2024-02-04 18:17:01 发布

阅读量643

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_45152848/article/details/103043576

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

在这里插入图片描述
如果我们创建元素后需要取此元素的html内容存起来，大概是使用这种方法
但是如果是下面的情况

有特殊字符的情况

会被转义
在这里插入图片描述

如果元素的自定义属性值有如果的转义字符，见下例

可以发先 & 、" 两个被转义了，其它的并没有被转义

问题来了
如果有场景如下，则会被两次转义

$('<div>',{
	name: '123213&amp;&quot;21313'
})

在这里插入图片描述
这个其实看起来不是问题，就是设计的规则
但是我们在用起来就不是很友好了

解决方如下

第一种（不知道会不会有问题）

在这里插入图片描述

此方法目前看来 3.3.1是支持这种写法的，网上并没有找到相关的说法，可能需要研读一下源码

第二种

//HTML转义
function HTMLEncode(html) {
	var temp = document.createElement("div");
	(temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
	var output = temp.innerHTML;
	temp = null;
	return output;
}
//HTML反转义
function HTMLDecode(text) { 
	var temp = document.createElement("div"); 
	temp.innerHTML = text; 
	var output = temp.innerText || temp.textContent; 
	temp = null; 
	return output; 
}