Menu
I am very new to riot.js and may be i am asking an obvious thing.
If I add tag statically and then mount it - everything works perfectly. But if I try to add tag using JavaScript dynamically - I see nothing. I suppose that I must somehow mount newly created element, but I don't know how to do this.
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.6.7/riot+compiler.min.js"></script>
<body>
<h1>
testing riot.js
</h1>
<ol id="list">
<li>
<example></example>
</li>
<li>
<example></example>
</li>
</ol>
<button onclick="addTag()">Add tag</button>
<script type="riot/tag">
<example>
<p>Welcome to Riot.js</p>
</example>
</script>
<script>
riot.mount('example');
function addTag(){
var list = document.getElementById("list");
var li = document.createElement('li');
list.appendChild(li);
var tag = document.createElement('example');
li.appendChild(tag)
}
</script>
</body>
314
You must call riot.mount after you've added the node to the DOM:
function addTag(){
var list = document.getElementById("list");
var li = document.createElement('li');
list.appendChild(li);
var tag = document.createElement('example');
li.appendChild(tag)
riot.mount(tag, 'example');
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
