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

[loveuloveme]

HTML 代码比较多，所以希望是可以整块复制粘贴的，或微调一下的。

[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/