使用JavaScript访问HTML中的标签标签

Question

我正在尝试将占位符“公司名称（可选）”更改为“孩子的名字”。

我无法直接编辑HTML，但可以使用JavaScript文件。 我正在尝试使用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>

下面的代码将“孩子的名字”添加到<input> ，但是我想将其添加到<label> 。 标签没有ID或类。 有没有办法将标签占位符从“公司名称（可选）”更改为“孩子的名字”？

function myFunction() {
  document.getElementById("company").placeholder = "Child's Name";     
}
myFunction();

Answer 1

解决方案1

// 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";

或者，作为单线：

document.getElementById("company").nextElementSibling.textContent = "Child's Name";

注意： nextElementSibling返回下一个元素，而nextSibling返回下一个元素，文本节点或注释节点。 因此，在这种情况下，使用nextSibling会将文本内容插入到label元素之前，而不是在其内部。

解决方案2

LGSon提供。

// Get label element using selector
var labelElement = document.querySelector("#company + label");

// Set label element's content
labelElement.textContent = "Child's Name";

或者，作为单线：

document.querySelector("#company + label").textContent = "Child's Name";

Answer 2

 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> 

Answer 3

知道alt和placeholder不是<label>标记的有效属性。

由于声称无法更改HTML，因此可以使用<input>引用中的nextElementSibling访问<label> 。

在您的<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> 

Answer 4

您要求输入标签的行为类似于标签。 您可以直接访问您的标签标签并进行更改。

只需在标签标签中添加一个ID，然后将该ID插入到getElementById 。

如果要更改显示的文本，请使用.innerHTML或.innerText