需求如下图:

追加给前台后,效果如下:

可以在源码看到:

是将后台给出来的数据,直接当作字符串给填充在了前台HTML中。

而查看浏览器编译后的HTML源码可以发现:

原来字符串中的<br> 的<>符号已经被转义

实际是想将渲染出来的字符串中的<br>换行符可以生效。

处理方式:

var tbody = $(".J_listtable_cont").find("tbody").children();
for (let i = 0; i <tbody.length ; i++) {
var children = tbody[i];
var td = children.children[1];
var text = td.innerText;
td.innerHTML
= text;
}

核心就是上面标红的两句,将元素的innerText  赋值成  元素的 innerHTML。即可避免转义的问题,将字符串中包含的 HTML标签生效。

最后的效果如下:

【HTML】处理<br>换行符追加到前端换行无效的问题 --- html中渲染的字符串中包含HTML标签无效的处理方法,字符串中包含HTML标签被转义的问题 解决的更多相关文章

  1. 网络换行符替换为word换行符

    在替换的页面上,查找里输入:^l,在替换里输入:^p,然后点击替换即可.

  2. myeclipse 出现换行符和空格符 解决方案 换行出现乱码

    请参看百度经验 https://jingyan.baidu.com/article/acf728fd2639e4f8e510a399.html myeclipse 2014 自定义视图Customiz ...

  3. linux下shell 脚本 中windows换行符换成linux换行符

    sed -i 's/\r//' filename window下默认是 \r\n linux下是\n unix下是\r

  4. 解决不同操作系统下git换行符一致性问题

    一.不同操系统下的换行符CR回车 LF换行Windows/Dos CRLF \r\nLinux/Unix LF \nMacOS CR \r二.解决方法 打卡git bash,设置core.autocr ...

  5. 小小换行符乱谈(文本文件vs二进制文件)

    使用 C 语言的 fopen 打开文件时,可以指定的 mode 有 12 个,其中 6 个包含  "b" 使用 C++ 的 fstream 打开文件时,可用的模式组合有 24 个( ...

  6. linux下与windows下的换行符

    [原文有些许错误,已作了修改] 回车符号和换行符号产生背景 关于“回车”(carriage return)和“换行”(line feed)这两个概念的来历和区别.在计算机还没有出现之前,有一种叫做电传 ...

  7. linux和Dos下换行符转换

    一.windows的文件到linux下的转换方法: 1. 用sed命令替换 sed -e 's/^M//g' original.txt > target.txt (注意^M 在Linux/Uni ...

  8. 【aardio】回车换行符

    回车换行符 在计算机还没有出现之前,有一种叫做电传打字机(Teletype Model 33)的玩意,每秒钟可以打10个字符.但是它有一个问题,就是打完一行换行的时候,要用去0.2秒,正好可以打两个字 ...

  9. 菜鸟教程之工具使用(八)——EGit禁止自动转换回车换行符

    众所周知,Windows和Linux系统的回车换行是不一样的.想要进一步了解它们的可以阅读下面的介绍,不感兴趣的可以直接跳过. 产生背景 关于“回车”(carriage return)和“换行”(li ...

随机推荐

  1. Bootstrap-table表格插件的使用方法

    前言 上次写了一个可拖动列表的插件,但除了这个特点没什么优点了,接下写的是我们常用的Bootstrap-table表格插件 正文 官网:https://bootstrap-table.com/ 有两个 ...

  2. filebeat + ELK 部署篇

    ELK Stack Elasticsearch:分布式搜索和分析引擎,具有高可伸缩.高可靠和易管理等特点.基于 Apache Lucene 构建,能对大容量的数据进行接近实时的存储.搜索和分析操作.通 ...

  3. maven 学习---转换基于Maven的Web应用程序支持Eclipse IDE

    在上一节教程中,使用Maven创建了一个Web应用程序.这里有一个指南,告诉你如何转换Web应用程序到Eclipse IDE支持的形式. 注意,通过WTP工具Eclipse IDE支持Web应用程序, ...

  4. [转]技术比较Agent和Agentless监控优缺点

    本文并非原创,转自:http://wenku.baidu.com/link?url=NGT2NA7Lf6fZSPmcOxFQqL4cYROHlIOJyiWCnGdwv3kljMqub-6zyjgsSw ...

  5. 动态改变伪元素样式的方(用:after和:before生成的元素)

    自己查资料总结的两种方法 一.纯css改变 a:hover:before{left:-20%;} a:hover:after{right:-20%;} a:before{ left:-100%; } ...

  6. Odoo10学习笔记三:模型(结构化的应用数据)、视图(用户界面设计)

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/11189263.html 一:模型 [Odoo中,一切皆模型,连视图都是模型.Odoo将各种数据,如:权限数据 ...

  7. requests---HTTPS请求

    做过接口测试的都会发现,现在的接口都是HTTPS协议了,今天就写一篇如何通过request发送https请求,如果不是很了解HTTP协议的同学可以看下我的另外一篇博客什么是HTTP 什么是HTTPS ...

  8. 个人第2次作业:熟悉使用Git工具

    GIT地址 https://github.com/dxg1999 GIT用户名 dxg1999 学号后五位 62317 个人博客 我的博客 作业链接 作业内容 项目作业的整个过程 作业背景 阿超家里的 ...

  9. 利用nodejs识别二维码内容的方法

    const decodeImage = require('jimp').read; const qrcodeReader = require('qrcode-reader'); qrDecode(&q ...

  10. win10经常无法复制粘贴

    两种方法尝试一下: 1. 在c:\windows\system32 目录下新建文件夹,命名为clip 2. 因为有道词典会监控并占用你的剪贴板,请尝试关闭有道词典的[取词]和[划词]功能,如果还不行就 ...