如何通过javascript为没有任何id或类的输入标签创建名称标签？答案

【问题标题】：How to create name tag for input tag without any id or class by javascript?如何通过javascript为没有任何id或类的输入标签创建名称标签？
【发布时间】：2021-10-06 05:00:16
【问题描述】：

我正在处理一个表单：

<div class="directions_holder">
                    <h4><i class="fa fa-map-marker"></i> Get Direction</h4>
                    <p>Enter your location</p>
                    <form action="" align="right" onsubmit="calcRoute('routeStart615d1caf4ca70', '10.809556085818913', '106.62590956389425', 'map_canvas615d1caf4ca6f');
                                        return false;">
                        <input type="text" id="routeStart615d1caf4ca70" value="" placeholder="Your Location" style="margin-top:3px"><br><br>
                        <input type="submit" value="Get Direction" class="button" onclick="calcRoute('routeStart615d1caf4ca70', '10.809556085818913', '106.62590956389425', 'map_canvas615d1caf4ca6f');
                                            return false;">
                    </form>
                </div>

我想在这个输入中添加一个名称标签 name="autocomplete_address" 以使自动完成地址插件工作，但我不知道如何在 javascript 中找到输入，因为每次刷新页面时这个输入的 id 总是改变所以我不知道如何选择它来添加名称标签。

<input type="text" id="routeStart615d1caf4ca70" value="" placeholder="Your Location" style="margin-top:3px"><br><br>

请帮助我。谢谢

【问题讨论】：

标签： javascript php wordpress

【解决方案1】：

由于您不能使用 id 作为选择器，也许您可以尝试 DISTINCT 之类的占位符选择器，这样您就可以像这样编写代码

var elm = document.querySelectorAll('[placeholder="Your Location"]')[0];
elm.setAttribute("name","autocomplete_address");

//Alert current name
alert(elm.getAttribute("name"));

或者您可以使用适合您的其他属性更改 querySelectorAll() 的值

【讨论】：

成功了，你是我的英雄。太感谢了！我还有一个问题，我可以在 1 个标签中使用 2 个 id 吗？输入的原始id以routeStart开头，后面是随机数，这样我无法选择这个输入，如果我为这个输入添加另一个ID，是否有效？
@sairy 不，一个元素不能有多个 ID。如果你设置一个新的，它会覆盖旧的。
非常感谢，我尝试用id替换名称，当id "autocomplete_address" 替换输入的routeStart id时，地图的Get Route不能用于测试。但是您的代码运行良好，现在我知道如何选择没有 id 和 class 的元素。非常感谢！

【解决方案2】：

document.querySelector('input[type=text]') 将获得页面上的第一个输入字段。

如果您有多个表格，请先选择表格。

【讨论】：

我有2个表单，有很多输入字段，我需要帮助的是第一个，我不知道如何先选择表单，因为表单没有任何类或id ，谢谢

【解决方案3】：

也许这是你想要的

记住一件事名称是属性而不是标签..

let form = document.getElementById("form");
    var input = document.createElement("input");
    input.setAttribute("type", "autocomplete_address");
    form.appendChild(input);

【讨论】：

感谢您的代码。我试过并得到了这个错误：Uncaught TypeError: form is null
设置表单的id是id="form"

【解决方案4】：

使用 JQuery 你可以简单地做到这一点

$('.directions_holder input[type="text"]').attr('name','autocomplete_address');

【讨论】：

我试过你的代码，得到了这个错误：Uncaught TypeError: $ is not a function
你需要在你的项目中添加JQuery