teelou teelou - 4 months ago 122
Node.js Question

Pug/ Jade - input is a self closing element: <input/> but contains nested content?

I want to create the html like this:

<label class="radio-inline">
<input type="radio" name="hidden" checked="" value="Visible"> Visible
</label>


Pug/ Jade:

label.radio-inline
input(type="radio", name="hidden", value="0", checked="") Visible


But I get an error:


input is a self closing element: but contains nested content.


What does it mean? How I can fix this?

Iso Iso
Answer

There are multiple ways to do that using Jade / Pug. The first way is to use a pipe char (which requires a new line):

input
  | text

The second way is to use tag interpolation (and you can stay on the same line):

#[input] text

So an alternative Jethro's answer would be:

label.radio-inline
  #[input(type='radio', name='hidden', value=0, checked='')] Visible

Note that you can even do:

 label #[input] text

Which will generate:

<label>
  <input/> text 
</label>
Comments