码迷,mamicode.com
首页 > Web开发 > 详细

JS-text节点模拟innerHTML属性

时间:2019-01-02 01:27:51      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:css   comm   正则   math   显示   sqrt   family   ret   tran   

# [在线预览](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属性

标签:css   comm   正则   math   显示   sqrt   family   ret   tran   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!