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="pany" name="pany"
 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("pany").placeholder = "Child's Name";     
}
myFunction();

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="pany" name="pany"
 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("pany").placeholder = "Child's Name";     
}
myFunction();

• javascript
• html
• html-input

• 1 You need to select label not the input if you want to change label – Code Maniac Commented Dec 9, 2018 at 3:59
• Yes, how do I select the label without an id or class? – Gavin Commented Dec 9, 2018 at 20:36
• 2 Like this document.querySelector("#pany + label").textContent = 'Child's Name'; ...which work with the existing markup. – Asons Commented Dec 11, 2018 at 17:20
• 1 @jkdev Yes, thanks...my mistake, forgot the inner single quote. Or one escape the inner with a backslash – Asons Commented Dec 11, 2018 at 17:40
• 1 @jkdev Yes, of course...and thanks for asking, and upvoted – Asons Commented Dec 11, 2018 at 17:47

4 Answers 4

Solution 1

// Get label element, which is next element sibling of input element
var inputElement = document.getElementById("pany");
var labelElement = inputElement.nextElementSibling;

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

Or, as a one-liner:

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

Note: nextElementSibling returns the next element, while nextSibling returns the next element, text node, or ment 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("#pany + label");

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

Or, as a one-liner:

document.querySelector("#pany + label").textContent = "Child's Name";

var el = document.getElementById("pany-name-label");
el.textContent = "Child's Name";
el.alt = "Child's Name";

<div class="col-md-12">
  <input class="not-required" id="pany" name="pany" type="text" value="">
  <label alt="Company Name (optional)" id="pany-name-label"></label>
</div>

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("pany").nextElementSibling.innerText = "Child's Name";
}
myFunction();

<div class="col-md-12">
  <input class="not-required" id="pany" name="pany" type="text" value="">
  <label>Company Name (optional)</label>
</div>

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