[Bug] "Making" an element and "appending" it doesn't work

[iamjameswalters]

The docs for make provide an example of using make to create a DOM element then append it to the page. However, this puts a string representation of the object in the page, rather than the element.

I ran into this on a project I was working on, but I don't have that code handy at the moment.

Instead, I took the example code and added the missing, assumed pieces (i.e., styles and arguments):

<style>
.toppings {
  color: red;
}
</style>

<script type="text/hyperscript">
def formatPizzaToppings(toppings)
  make an Intl.ListFormat from "en", { type: "conjunction" }
    called listFmt

  for part in listFmt.formatToParts(toppings)
    if the part's type is "element"
      make a <span.topping/>
      put the part's value into its textContent
      append it to #toppings
    else
      append the part's value to #toppings
    end
  end
</script>

<div id="toppings" _="init formatPizzaToppings(['Pepperoni', 'Mushrooms', 'Green Peppers'])">
</div>

and loaded it into the playground.

I should have got this, per the docs:

But instead, I got this:

[andryyy]

Append will append a string to an element.

You want to put element at end of #there

[iamjameswalters]

@andryyy That's one way to do it, yes. But per the docs, append also appends to HTML content or the DOM:

The append command can append content to strings (as well as to arrays and the DOM)

Per the append reference:

The append command adds a string value to the end of another string, array, or HTML Element.

And again, I was following the example code from the make documentation.

[andryyy]

Hm, it says:

The append command adds a string value to the end of another string, array, or HTML Element.

That confirms my assumption.

The example makes a span element and has the parts value set to its textContent.

I assume that if you set the elements textContent you can append it as text to another element. If it doesn’t have textContent, it will parse the node as string.

You may also use element.outerHTML and append it to another element, but this will just append the text of the outerHTML to it. :)

_hs’ append is different from JS‘ append. It’s just a string operation on various types. In JS you can append text and types. In Hyperscript that’s "equal" to put.

[iamjameswalters]

Sure. In that case, the make documentation needs to be updated, because the code example shows using make to create a <span class="toppings"> and appending it to the element #toppings. It doesn't much matter to me which way the keyword works in the language, it matters that the code in the docs doesn't work, so either the language needs to be fixed to make the code work, or the code in the docs needs to be changed to fit the language implementation.