Jade content after closing tag

Question

I am converting some HTML from an existing application to Jade. I have an HTML block that looks like this:

<div class="checkbox">
  <label>
    <input type="checkbox" name="data[day][sunday]" value="sunday">
  Sunday
  </label>
</div>

What would be the equivalent of Jade for that? Ideally, it would look something like this:

div(class="checkbox"):
  label 
    input(type="checkbox" name="data[day][sunday]" value="sunday") 
    Sunday

But since it input

is a closing tag, I cannot follow it with the text "Sunday"

I have no problem writing this in a different way, which works exactly as I need it to, but I want to know how to solve this problem.

Thank!

+3

Michael hamilton Apr 21 15 at 18:58

1 answer

JoshWillik · Accepted Answer · 2015-04-21T19:50:19+0000

You can use |

in jade to solve this problem.

Any text following |

will be interpreted as text in the parent

div(class="checkbox"):
  label 
    input(type="checkbox" name="data[day][sunday]" value="sunday") 
    | Sunday

You can also use non-closure tags like this

div
  div
    span hello there
  | and plain text

will result in html like this

<div>
  <div>
    <span>hello there</span>
  </div>
  and plain text
</div>

Keeping in mind that writing straight HTML inside Jade is perfectly fine, you can solve this problem as well.

div(class="checkbox"):
  label.
    <input type="checkbox" name="#{data[day][sunday]}" value="sunday"> 
    Sunday

.

following a tag in Jade will handle all content such as text.