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

Question

我正在尝试将占位符“公司名称(可选)”更改为“ child 的姓名”。

我无法直接编辑 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>

下面的代码将“Child's Name”添加到 <input> ，但我想将其添加到 <label>反而。该标签没有 id 或类。有没有办法将标签占位符从“公司名称(可选)”更改为“ child 的名字”？

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