javascript - 传递html文件作为innerHTML的值

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

例如，如果单击了div1，则应该将html1替换为div1.html文件，将div2替换为div2.html。我来自PHP背景，只是学习香草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>

最佳答案

为此，您可以使用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>

HTML文件

javascript - 传递html文件作为innerHTML的值