将 html 文件作为 innerHTML 的值传递答案

【问题标题】：Pass html file as the value of innerHTML将 html 文件作为 innerHTML 的值传递
【发布时间】：2018-11-04 03:15:01
【问题描述】：

当用户单击特定 div 时，我正在调用一个替换 div 的 innerHTML 的函数。我能够在函数内部传递原始 html 代码以实现所需的结果，但我想使用相同的函数根据单击的 div 动态替换不同 div 的内容。

例如，如果单击 div1，则应将 innerHTML 替换为 div1.html 文件，将 div2 替换为 div2.html 文件。我来自 PHP 背景，刚刚学习 vanilla javascript，所以我想知道如何做到这一点。

这是我玩过的一些示例代码

function jobDescription() {
    document.getElementById('details').innerHTML = "\
        <div class=\"col-12 fade show\">\
            <div class=\"card text-white bg-dark\">\
                <div class=\"card-body text-center\">\
                    <h4 class=\"card-title\">Fullstack Web Developer</h4>\
                    <p class=\"card-text\">REMOTE</p>\
                </div>\
            </div>\
        </div>\
    ";
}

<div id="details" class="row align-items-center mt-5">
  <div id="freelance" class="col-lg-4 col-md-6 mb-3" onclick="jobDescription()">
      <div class="card text-white bg-dark">
          <div class="card-body text-center">
              <h4 class="card-title">Backend Web Developer</h4>
              <p class="card-text">FREELANCE</p>
          </div>
      </div>
  </div>
</div>

【问题讨论】：

查看github.com/patrick-steele-idem/morphdom，它完全符合您的需求，而且速度非常快。
顺便说一句，让自己熟悉 ES6 模板文字，它可以让您在连接/转义 HTML 方面省去很多麻烦。
@connexo 感谢您指出这一点，我应该使用 `` 而不是转义字符。

标签： javascript

【解决方案1】：

为此，您可以使用 iframe 的概念。

function FuncDesc(id, val)
{	alert(val);document.getElementById('i'+id).src = val;	}

<!DOCTYPE html>
<html>
<head>
	<title></title>
<script type="text/javascript">

</script>

</head>
<body>
<div id ="div1" onclick="FuncDesc(this.id, 'div1.html')">Div1</div>
<div id ="div2" onclick="FuncDesc(this.id, 'div2.html')">Div2</div>

 <iframe id="idiv1"></iframe> 
 <iframe id="idiv2"></iframe> 
</body>
</html>

【讨论】：