javascript - 渲染单选按钮

Question

如何使用 Maquette 正确定义单选按钮那么文本会渲染吗？如果我使用 <p>元素中会出现文本，但位于新行上。

var h = maquette.h;
var dom = maquette.dom;

document.addEventListener('DOMContentLoaded', function () {
    var form = h("form", [
      h("input", {type: "radio", value: "5", name: "freq"}),
      h("p", ["5 Hz"]),
      h("input", {type: "radio", value: "10", name: "freq"}),
      h("p", ["10 Hz"]),
      h("input", {type: "radio", value: "15", name: "freq"}),
      h("p", ["15 Hz"]),
   ]);
  document.body.appendChild(dom.create(form).domNode);
});

<script src="//cdnjs.cloudflare.com/ajax/libs/maquette/2.4.1/maquette.min.js"></script>

但是，如果我使用 <br>元素，文本不会出现。

var h = maquette.h;
var dom = maquette.dom;

document.addEventListener('DOMContentLoaded', function () {
    var form = h("form", [
      h("input", {type: "radio", value: "5", name: "freq"}),
      h("br", ["5 Hz"]),
      h("input", {type: "radio", value: "10", name: "freq"}),
      h("br", ["10 Hz"]),
      h("input", {type: "radio", value: "15", name: "freq"}),
      h("br", ["15 Hz"]),
   ]);
  document.body.appendChild(dom.create(form).domNode);
});

<script src="//cdnjs.cloudflare.com/ajax/libs/maquette/2.4.1/maquette.min.js"></script>

我做错了什么？

Answer 1

问题出在 <br>标签。通常，它用作空的自关闭标签( <br> 或 <br/> )。 You can read more here , 允许的内容 - 无，它是一个空元素。

您可以将文本放置在内联元素中，例如 <span>或者使用 <label> 更好，使用id在输入和 for标签上的属性。然后，放置一个空的 <br>在每行之后分隔不同的单选按钮。

这是解决方案本身:

var h = maquette.h;
var dom = maquette.dom;

document.addEventListener('DOMContentLoaded', function () {
    var form = h("form", [
      h("input", {type: "radio", value: "5", name: "freq", id: "freq1"}),
      h("label", {innerHTML: "5 Hz", "for": "freq1"}),
      h("br"),
      h("input", {type: "radio", value: "10", name: "freq", id: "freq2"}),
      h("label", {innerHTML: "10 Hz", "for": "freq2"}),
      h("br"),
      h("input", {type: "radio", value: "15", name: "freq", id: "freq3"}),
      h("label", {innerHTML: "15 Hz", "for": "freq3"}),
   ]);
  document.body.appendChild(dom.create(form).domNode);
});

<script src="//cdnjs.cloudflare.com/ajax/libs/maquette/2.4.1/maquette.min.js"></script>