CODEWITHSUNDEEP
htmlpug
Mike Hamilton
Mike Hamilton

Reputation: 1567

Jade content following self closing tag

I am converting some HTML from a preexisting application into Jade. I have a block of HTML that looks like this:

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

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

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

But because input is a self closing tag, I can't follow it with the text "Sunday"

I have no problem writing this in another way that works exactly as I need, but I want to know how to solve this problem exactly.

Thanks!

Upvotes: 3

Views: 1897

Answers (1)

JoshWillik
JoshWillik

Reputation: 2645

You can use the | in jade to solve this problem.

Any text that follows a | 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-self closing 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 completely valid, you can solve this problem like this as well.

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

The . following a tag in Jade will treat all content like text.

Upvotes: 5

Related Questions