原生Js显示富文本效果demo(整理)

简介: 原生Js显示富文本效果demo(整理)

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生Js显示富文本</title>
  </head>
  <body>
    <div id="message"></div>
  </body>
  <script>
    var text =
      '<div><img src="http://img.touxiangwu.com/2020/3/uq6Bja.jpg" alt=""><p style="font-size:12pt; line-height:115%; margin:0pt"><span style="font-family:宋体; font-size:12pt">富文本内容富文本内容富文本内容富文本内容富文本内容富文本内容。</span></p><p style="font-size:12pt; line-height:115%; margin:0pt"><span style="font-family:宋体; font-size:12pt">富文本内容富文本内容富文本内容。</span></p><p style="font-size:10.5pt; line-height:115%; margin:0pt 0pt 10pt; orphans:0; text-align:justify; widows:0"><span style="font-family:Calibri; font-size:10.5pt">&#xa0;</span></p></div><div class="cnzz" style="display: none;">\n'
    document.getElementById('message').insertAdjacentHTML("afterEnd", text)
  </script>
</html>
相关文章
|
6天前
|
JavaScript 算法 数据安全/隐私保护
原生JS实现:密码输入框显示隐藏密码效果
原生JS实现:密码输入框显示隐藏密码效果
|
4天前
|
前端开发 JavaScript
前端 JS 经典: 富文本高亮关键字
前端 JS 经典: 富文本高亮关键字
7 0
|
4天前
|
前端开发 JavaScript
前端 js 经典:Object 常用原生方法
前端 js 经典:Object 常用原生方法
10 2
|
4天前
|
前端开发 JavaScript
前端 js 经典:array 原生方法
前端 js 经典:array 原生方法
10 1
|
4天前
|
JavaScript 索引
jQuery 实现 图片框切换【与原生 JS 对比】
jQuery 实现 图片框切换【与原生 JS 对比】
|
5天前
|
监控 JavaScript 前端开发
超越原生:探索Node.js中最佳文件系统三方库
超越原生:探索Node.js中最佳文件系统三方库
|
6天前
|
JavaScript 前端开发 索引
JavaScript array 原生 reduce 方法的模拟实现
JavaScript array 原生 reduce 方法的模拟实现
9 2
|
6天前
|
JavaScript 计算机视觉
原生js通过年龄判断是否可以抽奖
原生js通过年龄判断是否可以抽奖
11 0
|
6天前
|
存储 JavaScript 前端开发
原生JS如何实现验证码
原生JS如何实现验证码
14 0
|
6天前
|
JavaScript 安全 前端开发
原生JS实现一键复制,一键粘贴
原生JS实现一键复制,一键粘贴
13 0