How to set ID using javascript?

javascript

Solution

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.

Problem

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!

Original source