Доступ к тегу метки в HTML с помощью JavaScript

Question

Я пытаюсь изменить местозаполнитель «Название компании (необязательно) на« Имя ребенка ».

Я не могу редактировать HTML-код напрямую, но могу использовать файл JavaScript. Япытаюсь получить доступ к приведенному ниже HTML с помощью файла JavaScript.

<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>.не имеет идентификатора или класса. Есть ли способ изменить метку-заполнитель с «Название компании (необязательно) на« Имя ребенка »?

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, а не внутри него.

Solution 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

Знайте, что alt и placeholder не являются допустимыми атрибутами для тега <label>.

Поскольку вы заявляете, что не можете изменить HTML, вы можете использовать nextElementSibling из <input> ссылка для доступа к <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 3

Вы просите входной тег вести себя как метка.Вы можете напрямую получить доступ к тегу ярлыка и изменить его.

Просто добавьте идентификатор к тегу метки, а затем вставьте этот идентификатор в getElementById.

Если вы хотите изменить отображаемый текст, используйте .innerHTML или .innerText

Answer 4

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>