Creating and mounting tags dynamically in riot.js

Just starting out with riot.js and I have a question that may seem obvious.

When I statically add a tag and then mount it, everything works perfectly. But when I try to dynamically add a tag using JavaScript, nothing shows up. I believe I need to somehow mount the newly created element, but I'm not sure 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>

Answer №1

Make sure to invoke riot.mount only after the node has been successfully added to the DOM:

function insertTag(){
  var listElement = document.getElementById("list");
  var listItem = document.createElement('li');
  listElement.appendChild(listItem);

  var tagElement = document.createElement('custom-tag');
  listItem.appendChild(tagElement)
  riot.mount(tagElement, 'custom-tag');
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript can sometimes present peculiar challenges when it comes to setting style attributes, especially when a DOCTYPE is

It seems like I am encountering an issue when trying to dynamically create and modify a <div> element using JavaScript. The problem arises when I use the XHTML 1 Transitional doctype. This is how I am generating the <div>: var newDiv = docume ...

What is the process for uploading a single file to a server using Angular?

Looking to upload a single file to a server using Angular? Check out this resource for attaching and uploading one file: You can also view the code snippet here: https://stackblitz.com/edit/angularizjqax?file=src%2Fapp%2Fupload%2Fdialog%2Fdialog.componen ...

The div remains stationary

How can I change the position of a div element that is not moving despite my efforts? $(document).ready(function() { $("#btn1").click(function(){ $("#box").css("left","300px"); }); }); ...

Continuously iterate through collection as it expands over time

As I cycle through an array, I'm performing additional actions that could potentially prolong the loop if new elements are added to the array during iteration. (I understand it's not recommended to modify the object being iterated over, but pleas ...

Using `preventDefault()` will also block any text input from being entered

Note: I am looking for a way to clear the text box using the enter key after typing some text. My apologies for any confusion caused. Update 2: The missing event parameter was causing all the issues. I feel like a failure as a programmer. I am trying to ...

Utilizing Custom Validators in Angular to Enhance Accessibility

I'm struggling to access my service to perform validator checks, but all I'm getting is a console filled with errors. I believe it's just a syntax issue that's tripping me up. Validator: import { DataService } from './services/da ...

Placing pins on Google Maps

I'm attempting to display two separate markers on two individual maps positioned next to each other on my website. <script type="text/javascript"> var map, map2; function initialize(condition) { // setting up the maps var myOptions = { zoo ...

Error in Node.js: Cannot listen on socket.io object as it does not have a 'listen' method

I am currently developing a Node application using socket.io version 0.9.13 alongside Express 3.0.6. I am encountering an issue where the app fails to run due to an error stating that socket.io does not have a method called listen(). Here is the code snipp ...

Problem with utilizing Passport-Local while executing a Mongoose.save operation

I've been troubleshooting the following code snippet: router.post('/register', function(req, res) { User.register(new User({ username : req.body.username }), req.body.password, function(err, user) { if (err) { ...

Unable to trigger AJAX POST with jQuery click handler

Important Note: Personally, I have a preference for utilizing jQuery over the shorthand $; although it involves more typing, I find it to be more readable. I am working on a simple form that allows users to input their first and last names as well as an e ...

Angular failing to update $scope variable within controller

I need to implement a directive that allows file uploading directly to the browser angular.module('angularPrototypeApp') .directive('upload', ['$parse', function ($parse) { return { restrict: 'A', scope: fal ...

The dimensions of the pop-up window in Chrome's JavaScript are not displaying correctly

My goal is to launch a new chat room window on our website. The dimensions of the chat room are set to 750px x 590px. Below is the link I am using to trigger the javascript popup. <a href="javascript:void(0)" onclick="window.open('http://gamersuni ...

Ensuring precise accuracy in JavaScript; transforming 0.5 into 0.5000

My current challenge involves converting every fraction number to n decimal places in JavaScript/Node.js. However, I've encountered a roadblock as it appears impossible to convert 0.5 to 0.5000. This discrepancy is causing my test cases that anticipat ...

Issues with reactivity are present in certain items within Vue.js cards

Can someone please assist me with this issue that has been causing me trouble for days? I am working on updating the quantity and total price in a checkout card: The parent component: <template> <div> <upsell-checkout-product ...

Tips for successfully retrieving a boolean value from an ASP.Net JavaScript AJAX request using a C# method

Query: Is there a way to call a C# function from JavaScript code on an .aspx webpage to get authentication results based on a username and password? Here is the JavaScript AJAX POST request I am currently using: $.ajax({ type: "POST", ...

Obtain an oAuth token through the use of npm

Recently, I've been working on a nodeJS service to fetch an OAuth token from a server. Unfortunately, I keep encountering errors when running the function below: var express = require('express') var http = require('http'); var htt ...

jQuery - Enlarge Tree View to the level of the selected node

I am struggling to figure out how to expand the tree view up to a selected node level. If anyone has any ideas on how to accomplish this, please let me know. For instance, if we click on 'Parent d' in the 'Category list', I want to exp ...

The Vue mixin properties are devoid of content and lack reactivity

Could you please guide me in the right direction if this question has already been asked before? I really hope it's not a duplicate. I have a Vue application that is compiled using Webpack@NPM. In order to pass a property (roles) across all component ...

Attempting to dispatch data from Vue.js event bus

I am attempting to increase the count of quotes by one and also add the text from a textarea to an array. While the text is successfully added to the array, the number of quotes always remains zero. I have tried combining the two actions in one method as w ...

Customizing content based on Route - Utilizing Node.js/React

I am currently working on setting up routes for different pages of store profiles in my Node app. I have been doing some research online and have come to understand how to adjust the parameters, but I am struggling with figuring out how to dynamically chan ...