# Uibuilder Uib-element - with variable html id

**URL:** https://discourse.nodered.org/t/uibuilder-uib-element-with-variable-html-id/93763
**Category:** General
**Tags:** uibuilder
**Created:** [7 December 2024 15:58 UTC](https://discourse.nodered.org/t/uibuilder-uib-element-with-variable-html-id/93763 "2024-12-07T15:58:36Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![skytrackerdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/skytrackerdave/32/95810_2.png) [@skytrackerdave](https://discourse.nodered.org/u/skytrackerdave)
#### Post date: [7 December 2024 15:58 UTC](https://discourse.nodered.org/t/uibuilder-uib-element-with-variable-html-id/93763/1 "2024-12-07T15:58:36Z")

</div>

I am interested in inserting a different id each time I insert a div using uib-element. To use one of the uibuilder examples;

```auto
<div id="md1"><h2>Markdown Card</h2>
<p>Dynamically added from a Node-RED/UIBUILDER no-code node.</p>
<p>Random number: 67</p>
</div>

```

I would like to insert a div using id="md1" for the first div, then, say id="md2" for the second div, and so on, up to say eight divs each with a different id. What would be the best way to do this?

I can put my own `<div id="test1"></div>` tags in the payload, and by removing the "md1" tag in the config I obtain my objective but every instance is then surrounded by a plain `<div></div>` set of tags. That might work.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [8 December 2024 01:40 UTC](https://discourse.nodered.org/t/uibuilder-uib-element-with-variable-html-id/93763/2 "2024-12-08T01:40:25Z")

</div>

`uib-element` allows a number of different inputs for the id:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/3/93180ac2d5a47276189afe1af7ae1fd0d160aed1.png)

So all you need to do is to send a series of messages and just pick up the id from the msg. Or you can use a JSONata expression directly. You need a counter though so you might also need a change node and a flow variable, just a single change node will let you do both things together. Of course, you could also use a function node if you are happy using JavaScript.

Also remember that the no-code nodes like `uib-element` actually output low-code objects so by all means capture an output and amend it for yourself either using JavaScript or a change node with JSONata. So you could use a temporary element node to produce your own template output and then build on that.

Also, don't forget one of the other no-code nodes `uib-tag`:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/c/4c5dfb462e2cd071c4572d005eff1edd3c386eef.png)

Which is good for creating individual tags rather than compound elements.

Another option is to use a standard Node-RED template node to output HTML where you can use Mustache `{{someMsgProperty}}` tags. Then send that to the `uib-element` node set to HTML output.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/7/47f70f27024559466195769bc8075edb324c6004.png)

Since the HTML node wraps in a div with the supplied ID, you would just need your inner HTML from your example, the element node would wrap that in the div.

---

<div class="post-metadata">

### Author: ![skytrackerdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/skytrackerdave/32/95810_2.png) [@skytrackerdave](https://discourse.nodered.org/u/skytrackerdave)
#### Post date: [8 December 2024 05:45 UTC](https://discourse.nodered.org/t/uibuilder-uib-element-with-variable-html-id/93763/3 "2024-12-08T05:45:57Z")

</div>

OK so I just put a function node before the uib-element node and changed msg.tagid to my choice of id for the div and it works out just fine. Thank you.

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [22 December 2024 05:46 UTC](https://discourse.nodered.org/t/uibuilder-uib-element-with-variable-html-id/93763/4 "2024-12-22T05:46:43Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.