javascript 如何使用javascript设置ID?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15754859/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 01:59:33  来源:igfitidea点击:

How to set ID using javascript?

javascript

提问by Abdelouahab Pp

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>

我正在生成一个包含大量产品的页面,为此,我需要很多 ID,并且我使用服务器端 (Python) 完成了它,因此我为每个产品发送了它自己的 <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

现在因为用户将 dinamycaly 设置一个值并在浏览器中查看结果,我想生成另一个ID,为此我找到了btoa("hello1")所以我生成另一个ID

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

那么问题来了,我该如何btoa("hello1")输入<div>

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

编辑:我想要生成的是另一个<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>

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

如您所见,用户将输入一个值并动态查看它。

This will work from Python using:

这将在 Python 中使用:

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

但是我如果可以使用Javascript来完成,服务器将免费进行一半的操作!

回答by Daniel Imms

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:

为了进一步举例,假设您想获取所有具有“abc”类的元素。我们可以用它querySelectorAll()来完成这个:

HTML

HTML

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

JS

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:

这将为'abc-<index number>'每个元素分配 ID 。所以它会是这样的:

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


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

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

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

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


Update

更新

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

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>

Your requirements still aren't 100% clear though.

不过,您的要求仍然不是 100% 清楚。