首页 文章

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

提问于
浏览 次
0

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

我无法直接编辑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或类 . 有没有办法从"Company Name (optional) to " Child的名字更改标签占位符？

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

4 回答

  • 0

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

    只需在标签标签中添加一个ID，然后将此ID插入 getElementById 即可 .

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

    回复于
  • 0
    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>
    回复于
  • 1

    知道 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>
    回复于
  • 0

    解决方案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";
    回复于

相关问题