JavaScript 中存入一段 HTML 代码，运行的时候加入到 DOM 中，最佳操作是什么

• 資深大佬 : crclz

  前端工程化还是 angular react vue 擅长。

  如果是前后端不分离的话，可以考虑后端模板引擎渲染那些公用的 html 代码。

• 主 資深大佬 : loveuloveme

  @crclz 这个需求想用原生 JavaScript， 把一段 HTML 代码直接写在 JavaScript

• 資深大佬 : Jirajine

  直接 jsx ？

• 資深大佬 : lichdkimba

  用樣板字面值
  https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Template_literals

• 主 資深大佬 : loveuloveme

  @Jirajine JSX allows us to write HTML in React. JSX 可以在原生 JavaScript 中用吗？官方文档好像没提

• 資深大佬 : Cbdy

  React

• 資深大佬 : crclz

  服务端把公用的 html 片段以静态文件的方式提供，前端使用 JQuery.load 方法加载 https://api.jquery.com/load/ ，或者使用原生 js 请求+手动修改 dom 。

• 資深大佬 : hoyixi

  1 简单的：JS （ ES6+）的 string interpolation + 原生 DOM 操作（比如 append ）
  2 复杂的，比如带点渲染逻辑的：Handlebars / Mustache，JS 模板库

• 主 資深大佬 : loveuloveme

  @crclz 不想额外多一个请求，想要直接放在 JavaScript 代码里
• 資深大佬 : xiangyuecn

  很多语言多行文本支持的都很烂，尤其是 java （上古时期的 JavaScript 照搬的 java 语法）

  虽然 es6 提供了一个简陋版，不过该难用时还是难用，里面还是得转义`，界定符号都不提供，订标准的那坨人喂猪的嘛

  `:docx:
  <div>
  这么简单的语法支持一下就这么难 `遇到 markdown 就瞎比` 的神奇语法
  </div>
  :docx:`

  php 的那个 doc 语法表面不错，但几个高度相似语法就懒得讲了。所以我选择自己编译 js 自定义的语法，可以玩出花来

• 資深大佬 : flasktest1

  html 里的 template 模板
  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

• 資深大佬 : cmdOptionKana

  @flasktest1 这个 template 非常好用，我很爱用，有了这个写简单页面很爽，不比 vue 差。

• 資深大佬 : cmdOptionKana

  @loveuloveme 用 createContextualFragment 想微调不方便吧？建议用 template

• 資深大佬 : gouflv

  用模板能解决的问题，居然说用 react，前端真不一样了现在

• 主 資深大佬 : loveuloveme

  @cmdOptionKana 这个做好后不用调整的， 直接引用 JS 就可以用了，如果要调整的话，整段复制到模版里，改后直接复制过来就行。 这是一个弹出模块，这样做的好处，就是哪里需要，直接引用 JS （ JS 里也不会有额外的模版请求）就行，

• 資深大佬 : Jirajine

  @loveuloveme 预编译一下啊，非要不愿意编译那只能引用 babel 运行时编译。
  jsx 的好处是容易维护。

• 資深大佬 : zy445566

  我是用 webpack 打包，然后 import 进来的，变量就是 HTML 字符串

• 資深大佬 : codingguy

  lit-html
  https://lit-html.polymer-project.org/