分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

JS-text节点模拟innerHTML属性

发布时间:2023-09-06 02:28责任编辑:苏小强关键词:HTML
# [在线预览](https://jsfiddle.net/1010543618/mz7ybu8g/2/)text节点无innerHTML这个属性!!! ?如果直接修改text节点的属性(data,nodeValue,textContent),或者使用js原生的修改text节点的内容的方法都会将HTML的预留字符变成转义字符直接显示成文本了,解决方法有: ?1. 使用正则表达式找出pre的innerHTML字符串中的全部text节点的字符串进行修改2. 给text外面包裹一个标签,改包裹标签的innerHTML,把包裹标签的内容移动到外面,删除包裹标签3. 使用jquery的replaceWith方法,这个就非常严谨了```replaceWith: function( value ) { ?var isFunc = jQuery.isFunction( value ); ?// Make sure that the elements are removed from the DOM before they are inserted ?// this can help fix replacing a parent with child elements ?if ( !isFunc && typeof value !== "string" ) { ???value = jQuery( value ).not( this ).detach(); ?} ?return this.domManip( [ value ], true, function( elem ) { ???var next = this.nextSibling, ?????parent = this.parentNode; ???if ( parent ) { ?????jQuery( this ).remove(); ?????parent.insertBefore( elem, next ); ???} ?});},```例:将pre标签中的回车替换为\
,空格替换为\&ebsp;,制表符替换成双\&ebsp;```html ?????
d3.selectAll("circle").transition() ???.duration(750) ???.delay(function(d, i) { return i * 10; }) ???.attr("r", function(d) { return Math.sqrt(d * scale); });
? ?

innerHTML of pre:

?

???```

JS-text节点模拟innerHTML属性

原文地址:https://www.cnblogs.com/jffun-blog/p/10206569.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved