How to: Jade HTML content after child element

Question

I have an h1 with a content of "World" and with a span with content "Hello" as its immediate child. How do I put the h1's content ("World") after the span's content ("Hello")?

Here's the code (Jade HTML):

h1
  span Hello
  World

Output: Hello

Answer 1

Jade provides three common ways of getting plain text. You can read the documentation here.

So by piping at the start of the text, it behaves as normal text and not a HTML tag.

h1
span Hello
| World

You can also add it inline.It will be in a single line which makes the jade code more readable.

h1 #[span Hello] World

Or add a custom class to span

h1 #[span.custom-classname Hello] World