如何在 JS 中嵌入 HTML 代码？

Posted 2020-10-09 是蓝蓝的呀

---知乎

常规方法未必见得多麻烦


var longString = "------------------------------------------------...
------------------------";

+
var longString = ‘------------------------‘ +
                 ‘------------------------‘ +
                 ...
                 ‘------------------------‘;
String.concat
‘‘.concat(
  ‘-----------------------------‘,
  ‘-----------------------------‘,
  ...
  ‘-----------------------------‘,
);
Array.join
[
  ‘-----------------------------‘,
  ‘-----------------------------‘,
  ...
  ‘-----------------------------‘,
].join(‘‘);

====本人曾经想用这种方法，但是这种无法将js中的数据 动态加上去。 如你想拼接  src="/images/"+imgstrs[x]  这样在html语法是错误的。

<script type="text/template" id="html_template">
<div>HTML代码</div>
</script>

<script type="text/javascript">
var html = document.getElementById(‘html_template‘).innerHTML;</script>
这种方式的好处就是可以保持代码缩进，易读易修改，、

===来自个人 vue中添加的模板 

<!-- 首页模版 -->
  <script id="home_tmpl" type="text/v-template">
    <img src="assets/img/home.png"  width="100%">
  </script>
  <!-- 列表模版 -->
  <script id="list_tmpl" type="text/v-template">
    <!-- 这里的内容不会显示到界面上 -->
    <div class="list">
      <ol>
        <li v-for="item in list">
          <a v-link="{ name: ‘item‘, params: { id: item.id } }">
            <span class="num">{{pad(item.id, 3)}}</span>
            <div class="info">
              <h3 class="title">{{item.name}}</h3>
              <span class="artist">{{item.artist}}</span>
            </div>
            <span class="duration">{{convert(item.duration)}}</span>
            <div class="photo"><img :src="item.poster" alt="{{item.artist}}"></div>
          </a>
        </li>
      </ol>
    </div>
  </script>

通过这样取出

  var loadTemplate = function (name) {
    return document.getElementById(name + ‘_tmpl‘).innerHTML
  }