the for directive doesn't work

[zhangtianxiao]

The for directive must be accompanied by a template tag,
when the for specification is created dynamically,
it doesn't work;

I find the innerHTML in these two ways is different, Hope to help you
`
let div = document.createElement('div');

/*let ul = document.createElement('ul');
ul.setAttribute('x-data',"{ colors: ['Red', 'Orange', 'Yellow'] }");

let template  = document.createElement('template');
template.setAttribute('x-for',"color in colors");

let li = document.createElement('li');
li.setAttribute('x-text',"color");

div.append(ul)
ul.append(template)
template.append(li)
console.log(div.innerHTML)
console.log(template)*/


div.innerHTML=`<ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
    <template x-for="color in colors">
        <li x-text="color"></li>
    </template>
</ul>`
root.append(div)

`