Question

我需要在我的页面中导入一些html文件，一切正常，但我正在使用的脚本在<section>之后添加内容，我需要在我插入JS的同一个地方

  <script>
    var getImport  = document.querySelector('#wl-mock-160-s1-import');
    var getContent = getImport.import.querySelector('#wl-mock-160-s1');
      document.body.appendChild(document.importNode(getContent, true));
  </script>

如果您需要，导入的html看起来像这样

<div id="wl-mock-190-s2">
  <div class="wl-mock-190-s2-top-wrap">

    <h2 class="wl-mock-190-s2-ent">Parlamento Europeo</h2>

    <div class="wl-mock-190-s2-img-wrap">
      <img src="../../assets/img/jpg/img-8.jpg" alt="">
      <img src="../../assets/img/png/play.png" alt="" class="wl-mock-190-s2-play">
    </div>
  </div>
  <h2 class="wl-mock-190-s2-title">Produciamo nuove contaminazioni. <br>
    Fukushima, Nagasaki e Mururoa.</h2>

  <p class="wl-mock-190-s2-p">Fukushima, Nagasaki e Mururoa. E vaccini ed olocausti e paradossi. Etilone, nefedrone e così via.</p>

    <button>Continua a leggere</button>

</div>

我尝试使用.html()方法，但失败了。

Answer 1

你自己的香草方式

您需要使用currentScript

<script>
  var getImport  = document.querySelector('#wl-mock-160-s1-import');
  var getContent = getImport.import.querySelector('#wl-mock-160-s1');
  // Get the pollyfiled/native current script
  var currentScript = var ownerDocument = document._currentScript || document.currentScript;
  // Put is before your element
  currentScript.parentNode.insertBefore(document.importNode(getContent, true), currentScript);
</script>

但你不必为yourselfe而烦恼，因为......

有一个

的自定义元素

尝试<imported-template> - 从外部文件导入HTML内容的自定义元素。它使用HTML Import加载文件，然后将<template>的内容标记到HTML树中的当前位置：

<强> main.html中

<link rel="import" href="bower_components/imported-template/imported-template.html">
<h1>Your main document that will import something else </h1>
<!-- The imported HTML will come here -->
<template is="imported-template" content="/path/to/external_file.html"></template>

您可以在

中使用HTML文档允许的任何内容

<强> external_file.html

<!-- Preload some dependencies etc.-->
<link rel="import" href="awesome-component.html">
<script src="init/some/stuff.js"></script>
<template>
  <!-- This will get stamped -->
  <h1>Hello World</h1>
  <awesome-component></awesome-component>
  <script>doMagicPerStampedContent();</script>
</template>

html import .appendChild方法

1 个答案:

你自己的香草方式

有一个