[英]Access Label Tag in HTML with JavaScript
I am trying to change the placeholder "Company Name (optional) to "Child's Name". 我正在尝试将占位符“公司名称(可选)”更改为“孩子的名字”。
I'm not able to edit the HTML directly, but I can use a JavaScript file. 我无法直接编辑HTML,但可以使用JavaScript文件。 I'm trying to access the below HTML with a JavaScript file.
我正在尝试使用JavaScript文件访问以下HTML。
<div class="col-md-12">
<input class="not-required" id="company" name="company"
type="text" value="">
<label alt="Company Name (optional)" placeholder="Company Name (optional)"></label>
</div>
The code below adds "Child's Name" to the <input>
, but I would like to add it to the <label>
instead. 下面的代码将“孩子的名字”添加到
<input>
,但是我想将其添加到<label>
。 The label does not have an id or class. 标签没有ID或类。 Is there a way to change the label placeholder from "Company Name (optional) to "Child's Name"?
有没有办法将标签占位符从“公司名称(可选)”更改为“孩子的名字”?
function myFunction() {
document.getElementById("company").placeholder = "Child's Name";
}
myFunction();
// Get label element, which is next element sibling of input element
var inputElement = document.getElementById("company");
var labelElement = inputElement.nextElementSibling;
// Set label element's content
labelElement.textContent = "Child's Name";
Or, as a one-liner: 或者,作为单线:
document.getElementById("company").nextElementSibling.textContent = "Child's Name";
Note: nextElementSibling
returns the next element, while nextSibling
returns the next element, text node, or comment node. 注意:
nextElementSibling
返回下一个元素,而nextSibling
返回下一个元素,文本节点或注释节点。 So in this case, using nextSibling
would insert the text content before the label element, not inside it. 因此,在这种情况下,使用
nextSibling
会将文本内容插入到label元素之前,而不是在其内部。
// Get label element using selector
var labelElement = document.querySelector("#company + label");
// Set label element's content
labelElement.textContent = "Child's Name";
Or, as a one-liner: 或者,作为单线:
document.querySelector("#company + label").textContent = "Child's Name";
var el = document.getElementById("company-name-label"); el.textContent = "Child's Name"; el.alt = "Child's Name";
<div class="col-md-12"> <input class="not-required" id="company" name="company" type="text" value=""> <label alt="Company Name (optional)" id="company-name-label"></label> </div>
Know that alt
and placeholder
are not valid attributes for a <label>
tag. 知道
alt
和placeholder
不是<label>
标记的有效属性。
As you claim that you cannot change the HTML, you can use the nextElementSibling
from the <input>
reference to access the <label>
. 由于声称无法更改HTML,因此可以使用
<input>
引用中的nextElementSibling
访问<label>
。
Inside your <div>
, the child elements <input>
and <label>
are siblings of each other. 在您的
<div>
内部,子元素<input>
和<label>
是彼此的兄弟姐妹。
function myFunction() { document.getElementById("company").nextElementSibling.innerText = "Child's Name"; } myFunction();
<div class="col-md-12"> <input class="not-required" id="company" name="company" type="text" value=""> <label>Company Name (optional)</label> </div>
You ask the input tag to behave like a label. 您要求输入标签的行为类似于标签。 You can directly access your label tag and change it.
您可以直接访问您的标签标签并进行更改。
Just add an id to your label tag and then insert this id into your getElementById
. 只需在标签标签中添加一个ID,然后将该ID插入到
getElementById
。
If you want to change the displayed text, use .innerHTML
or .innerText
如果要更改显示的文本,请使用
.innerHTML
或.innerText
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.