Question

我有一个带有<select>元素的HTML页面，但有几个选项。

<div id="par_id">
<select id="sel_id" onchange="if (this.selectedIndex) insertFragmentPage()">
      <option value="1">case 1</option>
      <option value="2">case 2</option>
      <option value="3">case 3</option>
      <option value="4">case 4</option>
</select>
</div>

function insertFragmentPage() {
    var selectElement = document.getElementById("sel_id");
    var div = document.getElementById("par_id");
    var fragment1 = document.createElement("div");
    var fragment2 = document.createElement("div");
    if (selectElement.selectedIndex > 2) {
      if (selectElement.nextSibling != null) {
        div.removeChild(selectElement.nextSibling);
      }
      div.appendChild(CONTENT_OF_FRAGMENT1);
    } else {
      if (selectElement.nextSibling != null) {
        div.removeChild(selectElement.nextSibling);
      }
      div.appendChild(CONTENT_OF_FRAGMENT2);
    }
  }

CONTENT_OF_FRAGMENT1和CONTENT_OF_FRAGMENT2是名为的同一目录中的文件 frag1.html和frag2.html包含带有根元素<form>的HTML代码。

我知道我可以直接在函数<form>中构建这个insertFragmentPage()元素，但这将是非常痛苦的工作。

您如何追加Javascript的文件内容？

Answer 1

首先我们要使用jquery，

var div = $('#par_id');
var fragment1 = "path to your file";
var fragment2 = "path to yoir file";

然后用

替换div.appendChild(.....)

div.load(fragment1);

或者

div.load(fragment2);

如果你想清除你的div，请使用

div.html("");

从Javascript插入部分HTML文件

1 个答案: