Javascript jQuery删除脚本末尾的附加元素
我有一段代码，应该在每个html元素之前放一个文本段。它确实放置了它们，我已经测试了它的放置距离，但是它会在函数结束后的某个时候删除它们。这是jQuery的问题，还是从另一个文档加载HTML的问题 下面是index.html的代码Javascript jQuery删除脚本末尾的附加元素,javascript,jquery,html,Javascript,Jquery,Html,我有一段代码，应该在每个html元素之前放一个文本段。它确实放置了它们，我已经测试了它的放置距离，但是它会在函数结束后的某个时候删除它们。这是jQuery的问题，还是从另一个文档加载HTML的问题 下面是index.html的代码 <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>DnD 4E Character Maker</title>
<!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>
DND4E字符生成器
#统计数据{
宽度：100%；
字体大小：粗体；
文本对齐：居中；
}
.一半{
文本对齐：居中；
宽度：50%；
高度：100px；
}
.揭露{
宽度：100%
}
字符名：
级别：
年龄：
种族：
龙裔
矮子
依拉德林
精灵
半精灵
半身人
人类
魔人
类别：
牧师
战士
圣骑士
护林员
流氓
术士
军阀
男巫
标准（3d6排列）
静态（订购3d6）
PointBuy（基数8，25分）
阵列（16-14-13-12-11-10）
$（“#子”）。单击（函数（）{
var x=$（“#字符表”）.serializeArray（）；
var name=x[0]。值；
变量级别=x[1]。值；
var age=x[2]。值；
var race=x[3]。值；
var classes=x[4]。值；
每个（x，函数（索引，值）{
console.log（索引+“：”+value.name+“：”+value.value）；
});
$（“.Stats”）.load（'statsheet.html'）；
$（“种族”）.text（种族）；
$（“类”）。文本（类）；
$（“.reveal”）.css({
“边框样式”：“脊形”，
“文本对齐”：“居中”，
});
$（“.half”）.css({
“文本对齐”：“居中顶部”，
“宽度”：“50%”
});
变量statarray=[“str”、“con”、“dex”、“int”、“wis”、“cha”]
控制台日志（比赛）
每个（statarray，function（i，val）{
如果（种族=“人类”）{
console.log（“#”+val+“-add”）；
$（“#”+val+“-add”）。追加（“HIII”）；
控制台日志（“附加”+val）；
}
console.log（$（“#str add”）.text（）；
});
console.log（$（“#str add”）.text（）；
});
console.log（$（“#str add”）.text（）；
<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>
力量
体质
灵巧
智力
智慧
魅力
appendbutton