Access Label Tag in HTML with JavaScript

Question

I am trying to change the placeholder "Company Name (optional) to "Child's Name".

I'm not able to edit the HTML directly, but I can use a JavaScript file. I'm trying to access the below HTML with a JavaScript file.

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

The code below adds "Child's Name" to the <input> , but I would like to add it to the <label> instead. The label does not have an id or class. Is there a way to change the label placeholder from "Company Name (optional) to "Child's Name"?

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

Answer 1

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

Or, as a one-liner:

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

Note: nextElementSibling returns the next element, while nextSibling returns the next element, text node, or comment node. So in this case, using nextSibling would insert the text content before the label element, not inside it.

Solution 2

Courtesy LGSon .

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

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

Or, as a one-liner:

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

Know that alt and placeholder are not valid attributes for a <label> tag.

As you claim that you cannot change the HTML, you can use the nextElementSibling from the <input> reference to access the <label> .

Inside your <div> , the child elements <input> and <label> are siblings of each other.

 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

You ask the input tag to behave like a label. You can directly access your label tag and change it.

Just add an id to your label tag and then insert this id into your getElementById .

If you want to change the displayed text, use .innerHTML or .innerText