How to set ID using javascript? [closed]

Question

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!

Answer 1

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.