如何以编程方式添加下标(html <sub> 标记)？

Question

我正在尝试使用JavaScript编程添加下标。我正在使用JavaScript中的.sub();命令。

我的预期结果：

<p>a = b + r<sub>1</sub></p>

我的代码：

function addSubscript(){
  var text = 'a = b + r' + '1'.sub();
  var para = document.createElement("p");
  var text_p1 = document.createTextNode(text);
  para.appendChild(text_p1);
  
  document.getElementById("print").appendChild(para);
}

button{
   width: 20%;
   margin-left: 40%;
}
#print{
   width: 100%;
   text-align: center;
}

<button onclick="addSubscript()">Add subscript</button>
<div id="print"></div>

我该如何修复？

Answer 1

文本节点中的内容呈现为as-is，而无需格式化。应用下标使用innerHTML：

function addSubscript(){
  var text = 'a = b + r' + '1'.sub();
  var para = document.createElement("p");
  para.innerHTML = text;
  
  document.getElementById("print").appendChild(para);
}

button {
  font-size: 18px;
  width: 100%;
  height: 26px;
}
#print {
  font-size: 16px;
  width: 100%;
  text-align: center;
}

<button onclick="addSubscript()">Add subscript</button>
<div id="print"></div>

Answer 2

您可以简单地在Innerhtml＆amp;在渲染时，它将使用HTML属性渲染。例如，您可以使用 - ＆lt;sub> 标签本身

function addSubscript(){
  var text = 'a = b + r' + '<sub>'+'1'+'</sub>';
  var para = document.createElement("p");
  para.innerHTML = text;
  
  document.getElementById("print").appendChild(para);
}

button {
  font-size: 18px;
  width: 100%;
  height: 26px;
}
#print {
  font-size: 16px;
  width: 100%;
  text-align: center;
}

<button onclick="addSubscript()">Add subscript</button>
<div id="print"></div>