Riot/JS: How to create standard HTML element dynamically (e.g., OL vs. UL) in tag

Question

Assume I have the following Riot/JS tag:

<my-list>
    <ol if="{this.opts.isOrdered}">
        <li><!-- extensive inner code --></li>
    </ol>
    <ul if="{!this.opts.isOrdered}">
        <li><!-- extensive inner code (same as above) --></li>
    </ul>
</my-list>

As you can see, the problem here is that . 。 And this is just an OL vs. UL split (ie, two predefined options); it is easy to imagine other splits, particularly if one wants a dynamic (non-predefined) wrapper element as defined in this.opts .

Is there any way to solve this ? ？

Answer 1

As i see, you want to pass this "extensive inner code" via opts or create it dynamically. So you can do something like this:

<my-list>
<ol id="ol_id" if="{this.opts.isOrdered}">
    <li><!-- extensive inner code --></li>
</ol>
<ul id="ul_id" if="{!this.opts.isOrdered}">
    <li><!-- extensive inner code (same as above) --></li>
</ul>

And for JS part:

this.on('mount', function () {
if (this.opts.isOrdered) {
    var ol_el = document.getElementById("ol_id");
    var extensive_inner_element = document.createElement('<required_element_or_custom_tag>');
    ol_el.appendChild(extensive_inner_element);
}
if (!this.opts.isOrdered) {
    var ul_el = document.getElementById("ul_id");
    var extensive_inner_element = document.createElement('<required_element_or_custom_tag>');
    ul_el.appendChild(extensive_inner_element);
}});