如何使用javascript设置ID？

Question

我正在生成一个包含大量产品的页面,为此,我需要大量的ID,而且我使用服务器端(Python)做到了所以我发送每个产品都有自己的 <div id='hello1'> test </div>

现在因为用户将dinamycaly设置一个值并在浏览器中查看结果,我想生成另一个ID,我发现btoa("hello1")这样我生成另一个ID

所以现在的问题,我如何把btoa("hello1")在<div>？

编辑:我想要生成的是另一个<div>而不是更新第一个.

<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>

正如您所看到的,用户将放置一个值并动态地查看它.

这可以从Python使用:

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

但我可以使用Javascript完成,服务器将为一半的操作免费!

Answer 1

你的意思是这样的吗？

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

为了进一步举例,假设您希望获得类"abc"的所有元素.我们可以querySelectorAll()用来完成这个:

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;

这将为'abc-<index number>'每个元素分配ID .所以它会像这样出现:

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

要创建一个元素并分配一个id我们可以使用document.createElement()然后appendChild().

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

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

更新

id如果您的脚本在HTML文件中,则可以像这样设置元素.

<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>

尽管如此,您的要求仍然不是100%明确.