JavaScript Element对象与字符串互转

本文介绍了在前端开发中如何将字符串转换为DOM元素,以及如何将DOM元素转换回字符串形式,利用document.createElement()和innerHTML属性实现数据类型的灵活转换。

我们常用的两种插入元素的方式: appendChild(node) 方法,该方法在父节点中追加子节点,不能是字符串类型;以及HTML5中的innerHTML属性,该属性可用来在父节点中写入字符串类型的标签;当取得的数据并不是自己想要的类型时,这时候就需要互转;

1、字符串转Element

/*字符串解析成元素节点类型*/
function parseElement(str) {
	var o=document.createElement("div");
	o.innerHTML=str;
	return o.childNodes[0];
}

2、Element转字符串

/*将元素节点类型字符串化*/
function stringIze(obj){
	var o=document.createElement("div");
	o.appendChild(obj);
	return o.innerHTML;
}

以上互转首先都借助document.createElement()创建一个临时元素节点o,然后通过innerHTML和appendChild()这个桥梁将传入的参数插入o,最后返回o内的第一个子节点childNodes[0]和字符串innerHTML,实现转换;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值