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
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.
Source: Stackoverflow.com