渲染单选按钮

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>以分隔不同的单选按钮。

以下是解决方案本身：

＆＃13;

＆＃13;

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);
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;