如何在HTML标记内使用Javascript变量？

Question

我正在尝试使用h(1-6)标签。有没有办法可以使用一个正则表达式或变量在屏幕上打印标签。

<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>

我希望使用一个变量或正则表达式，而不是使用所有变量或正则表达式，例如：

<h1-6>Heading</h1-6>
<h$>Heading</h$>

如有任何帮助，我们将不胜感激。

Answer 1

只编写HTML会更简单、更简单。

如果你真的想动态地做它，下面的方法是可行的。

​

window.onload = function(){
  var d = document.getElementById("out");
  var h, i, max = 7;
  for(i=1;i<max;i++) {
    h = document.createElement("h"+i);
    h.textContent = "Heading";
    d.appendChild(h);
  }
}

<div id="out"></div>

​

Answer 2

答案很简单，不是。不是使用原生javascript变量所指示的方式。HTML是静态文本。

您可能需要像这样编写一些JavaScript (其中v是您之前设置的全局变量)

<script type='text/javascript'>document.write("<h" + v + ">Heading</h" + v + ">")</script>

或者使用某种框架(jquery/react/angular)，以适用于该框架的方式实现基本相同的功能。

动态渲染内容就是这类框架的全部内容。

根据您试图实现的目标，在服务器端执行此操作可能更有意义。

Answer 3

您可以使用document.createElement()函数来创建HTML标记：

var e = document.createElement("h1");
e.innerHTML("heading");
document.body.appendChild(e);

或者，如果您想创建多个：

function create(text="",type="h1"){
    var e = document.createElement(type);
    e.innerHTML(text);
    document.body.appendChild(e);
}
create("heading one","h1");
create("heading two","h2");
create("heading three","h3");
create("heading four","h4");

这将创建以下内容：

<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>

它还可以使用不同的类型，比如<p>。