存储包含html标记的文本

Storing text that includes html tags

本文关键字：文本 包含 html 存储      更新时间：2023-09-26

我有要存储在和对象中的字符串。字符串中的某些文本需要特殊格式，特别是必须是下标。我尝试过简单地编写元素标记。标签显示时会显示在页面上。我创建了一个变量保存了那里的标签，将内容附加到变量中，子元素没有任何效果。尝试将.innerHTML添加到变量中，但仍然没有成功。任何想法。

var quizDiv = document.createElement("div")
  //gives from element and id attribute
quizDiv.setAttribute("id", "airspeedIndicatorQuiz")
  //retreives element on page inwhitch to place form and saves it in variable
var makeNewPage = document.getElementById("newPage")
  //appentds input form to makeNewPage
makeNewPage.appendChild(quizDiv)
//creat sub element and store in variable vso
var vso = document.createElement("sub")
  //creat text node and store in variable vsoText
var vsoText = document.createTextNode("SO")
  //append vsoText to vso
vso.appendChild(vsoText)
console.log(vso)
var aIMakingsObj = [{
  marking: "White arc",
  meaning: "Flap oparating range"
}, {
  marking: "V" + vso.innerHTML + " Lower A/S Limit White Arc",
  meaning: "Stall speed landing configuration"
}, {
  marking: "V<sub>FE</sub> Upper A/S Limit White Arc",
  meaning: "Maximum flap extention speed"
}, {
  marking: "Green Arc",
  meaning: "Normal Oparating Range"
}, {
  marking: "V" + '<sub>S1</sub>' + " Lower A/S Limit Green Arc",
  meaning: "Maximum flap extention speed"
}, {
  marking: "V<sub>NO</sub> Upper A/S Limit Green Arc",
  meaning: "Maximum structural cruse speed"
}, {
  marking: "Yellow Arc",
  meaning: "Caution Range (oparations in smooth air only)"
}, {
  marking: "V" + '<sub>NE</sub>' + " Red Line",
  meaning: "never exceed speed; above this speed structural failure may occure"
}]
displayQuiz()
function displayQuiz() {
  for (i = 0; i < aIMakingsObj.length; i++) {
    var aPool = document.createElement("p")
    var aPoolTex = document.createTextNode(aIMakingsObj[i].marking)
    aPool.appendChild(aPoolTex)
    makeNewPage.appendChild(aPool)
  }
}
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body id="newPage">

  <script src="js/main.js"></script>
</body>
</html>

innerHTML似乎正在工作。

var quizDiv = document.createElement("div")
  //gives from element and id attribute
quizDiv.setAttribute("id", "airspeedIndicatorQuiz")
  //retreives element on page inwhitch to place form and saves it in variable
var makeNewPage = document.getElementById("newPage")
  //appentds input form to makeNewPage
makeNewPage.appendChild(quizDiv)
//creat sub element and store in variable vso
var vso = document.createElement("sub")
  //creat text node and store in variable vsoText
var vsoText = document.createTextNode("SO")
  //append vsoText to vso
vso.appendChild(vsoText)
console.log(vso)
var aIMakingsObj = [{
  marking: "White arc",
  meaning: "Flap oparating range"
}, {
  marking: "V" + vso.innerHTML + " Lower A/S Limit White Arc",
  meaning: "Stall speed landing configuration"
}, {
  marking: "V<sub>FE</sub> Upper A/S Limit White Arc",
  meaning: "Maximum flap extention speed"
}, {
  marking: "Green Arc",
  meaning: "Normal Oparating Range"
}, {
  marking: "V" + '<sub>S1</sub>' + " Lower A/S Limit Green Arc",
  meaning: "Maximum flap extention speed"
}, {
  marking: "V<sub>NO</sub> Upper A/S Limit Green Arc",
  meaning: "Maximum structural cruse speed"
}, {
  marking: "Yellow Arc",
  meaning: "Caution Range (oparations in smooth air only)"
}, {
  marking: "V" + '<sub>NE</sub>' + " Red Line",
  meaning: "never exceed speed; above this speed structural failure may occure"
}]
displayQuiz()
function displayQuiz() {
  for (i = 0; i < aIMakingsObj.length; i++) {
    var aPool = document.createElement("p");
    aPool.innerHTML = aIMakingsObj[i].marking; // modified
    makeNewPage.appendChild(aPool)
  }
}
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body id="newPage">

  <script src="js/main.js"></script>
</body>
</html>

相关文章：