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

我正在尝试使用 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>

我怎样才能解决这个问题？

最佳答案

文本节点内的内容按原样呈现，没有格式。要应用下标，请使用 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>

关于javascript - 如何以编程方式添加下标(html <sub> 标签)？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55973638/