使用 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返回下一个元素、文本节点或注释节点。因此在这种情况下， usingnextSibling会将文本内容插入到 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";