我正在努力将 html 代码的某些部分写入脚本标记中间的文件中。
我当前有 document.Write，但它没有通过我的验证器，需要一个可以通过的解决方案。我尝试过创建文本节点并附加，以及innerHTML，但似乎都不起作用，有什么帮助吗？
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 3
Case Problem 2
Congressional Election Results
Author:
Date:
Filename: election.htm
Supporting files: back.jpg, logo.jpg, results.css, votes.js
-->
<head>
<title>Congressional Races</title>
<link href="results.css" rel="stylesheet" type="text/css" />
<script src="votes.js" type="text/javascript"></script>
<script src="barchart.js" type="text/javascript"></script>
<script>
function totalVotes(votes) {
var total=0;
for (var i=0; i<votes.length; i++) total+=votes[i];
return total;
}
function calcPercent(item, sum) {
return Math.round(100*item/sum);
}
function createBar(partyType, percent) {
switch (partyType) {
case "D": barText="<td class='dem'> </td>";break;
case "R": barText="<td class='rep'> </td>";break;
case "I": barText="<td class='ind'> </td>";break;
case "G": barText="<td class='green'> </td>";break;
case "L": barText="<td class='lib'> </td>";break;
}
for (var j=1; j <= percent; j++) document.write(barText);
}
function showResults(race, name, party, votes) {
var totalV=totalVotes(votes);
document.write("<h2>"+race+"</h2>");
document.write("<table>");
document.write("<tr><th>Candidate</th><th class='num'>Votes</th><th class='num'>%</th></tr>");
for (var i=0; i < name.length; i++) {
document.write("<tr>");
document.write("<td>"+name[i]+" ("+party[i]+")</td>");
document.write("<td class='num'>"+votes[i]+"</td>");
var percent = calcPercent(votes[i],totalV);
document.write("<td class='num'>("+percent+"%)</td>");
createBar(party[i], percent);
document.write("</tr>");
}
document.write("</table>");
}
</script>
</head>
<body>
<div id="intro">
<p><img src="logo.jpg" alt="Election Day Results" /></p>
<a href="#">Election Home Page</a>
<a href="#">President</a>
<a href="#">Senate Races</a>
<a href="#">Congressional Races</a>
<a href="#">State Senate</a>
<a href="#">State House</a>
<a href="#">Local Races</a>
<a href="#">Judicial</a>
<a href="#">Referendums</a>
</div>
<div id="results">
<h1>Congressional Races</h1>
<script type="text/javascript">
showResults(race[0],name1,party1,votes1);
showResults(race[1],name2,party2,votes2);
showResults(race[2],name3,party3,votes3);
showResults(race[3],name4,party4,votes4);
showResults(race[4],name5,party5,votes5);
</script>
</div>
</body>
</html>
最佳答案
我建议您不要使用document.write，因为后续的每个 document.write 都会覆盖前一个。相反，我建议您深入研究模板文字: https://www.youtube.com/watch?v=NgF9-pdTDGs和document.body.innerHTML。
const variableExample = 'Heading content';
document.body.innerHTML = `
<div>
<h1>${variableExample}</h1>
<p>I am some content!!</p>
</div>
`;
关于javascript - 如何在脚本标签中编写 HTML 代码？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57779905/