我有一段代码应该在每个html元素之前放置一个文本段。它确实放置了它们，我已经测试过它看到了多远，但它在函数结束后的某个时候删除了它们。这是jQuery的问题，还是从另一个文档加载HTML的问题？
以下是index.html的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>DnD 4E Character Maker</title>
<script type = "text/javascript" src = "jquery-1.12.0.min.js"></script>
<style>
#Stats{
width:100%;
font-weight:bold;
text-align:center;
}
.half{
text-align:center;
width:50%;
height:100px;
}
.reveal{
width:100%
}
</style>
</head>
<body>
<form id = "charsheet">
Character Name:<input type="text" name = "name" value = "John Doe"></input>
Level:<input type="text" name = "level" value = "1"></input>
Age:<input type="text" name="age" value = "25"></input>
Race:
<select name = "race">
<option value = "Dragonborn">Dragonborn</option>
<option value = "Dwarf">Dwarf</option>
<option value = "Eladrin">Eladrin</option>
<option value = "Elf">Elf</option>
<option value = "Half-Elf">Half-Elf</option>
<option value = "Halfling">Halfling</option>
<option value = "Human">Human</option>
<option value = "Tiefling">Tiefling</option>
</select>
Class:
<select name = "class">
<option value = "Cleric">Cleric</option>
<option value = "Fighter">Fighter</option>
<option value = "Paladin">Paladin</option>
<option value = "Ranger">Ranger</option>
<option value = "Rogue">Rogue</option>
<option value = "Warlock">Warlock</option>
<option value = "Warlord">Warlord</option>
<option value = "Wizard">Wizard</option>
</select>
<select name = "generation">
<option value = "standard">Standard (3d6-arranged)</option>
<option value = "static">Static (3d6-ordered)</option>
<option value = "pointbuy">PointBuy (Base 8, 25 points)</option>
<option value = "array">Array (16-14-13-12-11-10)</option>
</select>
<input type = "button" value = "Submit" id = "sub">
</form>
<table class = "reveal">
<tr><td class = "Stats" colspan = "2"></td></tr>
<tr>
<td id = "Race" class = "half"></td>
<td id = "Class" class = "half"></td>
</tr>
</table>
</body>
<script>
$("#sub").click(function(){
var x = $("#charsheet").serializeArray();
var name = x[0].value;
var level = x[1].value;
var age = x[2].value;
var race = x[3].value;
var classes = x[4].value;
jQuery.each(x, function(index, value){
console.log(index + ":" + value.name + ":" + value.value);
});
$(".Stats").load('statsheet.html');
$("#Race").text(race);
$("#Class").text(classes);
$(".reveal").css({
'border-style':'ridge',
'text-align':'center',
});
$(".half").css({
'text-align':'center top',
'width':'50%'
});
var statarray = ["str","con","dex","int","wis","cha"]
console.log(race)
jQuery.each(statarray, function(i, val){
if( race == "Human"){
console.log("#"+val+"-add");
$("#"+val+"-add").append("HIII");
console.log("appended "+val);
}
console.log($("#str-add").text());
});
console.log($("#str-add").text());
});
console.log($("#str-add").text());
</script>
</html>
对于加载的HTML
<form>
<table>
<tr>
<td class = "add" id = "str-add"></td>
<td class = "label">Strength</td>
<td class = "stat" id = "str"></td>
<td class = "mod" id = "str-mod"></td>
</tr>
<tr>
<td class = "add" id = "con-add"></td>
<td class = "label">Constitution</td>
<td class = "stat" id = "con"></td>
<td class = "mod" id = "con-mod"></td>
</tr>
<tr>
<td class = "add" id = "dex-add"></td>
<td class = "label">Dexterity</td>
<td class = "stat" id = "dex"></td>
<td class = "mod" id = "dex-mod"></td>
</tr>
<tr>
<td class = "add" id = "int-add"></td>
<td class = "label">Intelligence</td>
<td class = "stat" id = "int"></td>
<td class = "mod" id = "int-mod"></td>
</tr>
<tr>
<td class = "add" id = "wis-add"></td>
<td class = "label">Wisdom</td>
<td class = "stat" id = "wis"></td>
<td class = "mod" id = "wis-mod"></td>
</tr>
<tr>
<td class = "add" id = "cha-add"></td>
<td class = "label">Charisma</td>
<td class = "stat" id = "cha"></td>
<td class = "mod" id = "cha-mod"></td>
</tr>
</form>