[javascript] How to set ID using javascript?

I'm generating a page with lot of product, and for this, i need lot of ID, and i did it using a server side (Python) so i send for every product its own <div id='hello1'> test </div>

Now because the user will dinamycaly set a value and see the result in the browser, i want to generate another ID , to this i've found btoa("hello1") so i generate another ID

So the question, how do i put btoa("hello1") in <div> ?

Edit: what i want to generate is another <div> and not updating the first one.

<input id="{{str(product["avt"]["fto"])}}" > this will become  <input id="12232" > because it is special to Tornado Template
<span>New price :</span>
<span id=btoa({{str(produit["avt"]["fto"])}})> This  is where i use innerHTML </span>

as you can see, the users will put a value and see it dynamically.

This will work from Python using:

<span id="{{base64.b64encode(str(produit["avt"]["fto"]))}}"></span>

but i if it can be done using Javascript, the server will be free for the half of the operations!

This question is related to javascript

The answer is


Do you mean like this?

var hello1 = document.getElementById('hello1');
hello1.id = btoa(hello1.id);

To further the example, say you wanted to get all elements with the class 'abc'. We can use querySelectorAll() to accomplish this:

HTML

<div class="abc"></div>
<div class="abc"></div>

JS

var abcElements = document.querySelectorAll('.abc');

// Set their ids
for (var i = 0; i < abcElements.length; i++)
    abcElements[i].id = 'abc-' + i;

This will assign the ID 'abc-<index number>' to each element. So it would come out like this:

<div class="abc" id="abc-0"></div>
<div class="abc" id="abc-1"></div>

To create an element and assign an id we can use document.createElement() and then appendChild().

var div = document.createElement('div');
div.id = 'hello1';

var body = document.querySelector('body');
body.appendChild(div);

Update

You can set the id on your element like this if your script is in your HTML file.

<input id="{{str(product["avt"]["fto"])}}" >
<span>New price :</span>
<span class="assign-me">

<script type="text/javascript">
    var s = document.getElementsByClassName('assign-me')[0];
    s.id = btoa({{str(produit["avt"]["fto"])}});
</script>

Your requirements still aren't 100% clear though.