How to append an element to a div with className that have a child elemnt with idName-CodePudding

MY html has multiple divs that share the same class name and they have input elements with unique ids, I want to append a span under all of these inputs with JavaScript without editing the html.

this is the part of html

<form name="form" onsubmit="return validate();" method="get">
   <div >
      <label for="pass">Password</label>
      <input type="password"  name="pass" id="pass">
   </div>
   <div >
      <label for="pass2">Re-Type Password</label>
      <input type="password"  name="pass2" id="pass2">
   </div>
.
.
.
</form>

this my JS to create and append the span

const errorMessage = document.createElement('span');
errorMessage.textContent = "invalid input";
document.querySelector('.form-group').appendChild(errorMessage);

But this only creates one span in the first div

CodePudding user response：

Use querySelectorAll() and iterate.

querySelectorAll(".form-group").forEach(form => {
    const errorMessage = document.createElement('span');
    errorMessage.textContent = "invalid input";
    form.appendChild(errorMessage);
});

CodePudding user response：

querySelector just gets the first instance. You need to use querySelectorAll. Then put everything inside a loop

let group = document.querySelectorAll('.form-group') 
 
for (let i = 0; i < group.length; i  ) {
  const errorMessage = document.createElement('span');
  errorMessage.textContent = "invalid input";
  group[i].appendChild(errorMessage);
}

<form name="form" onsubmit="return validate()" method="get">
  <div >
    <label for="pass">Password</label>
    <input type="password"  name="pass" id="pass">
  </div>
  <div >
    <label for="pass2">Re-Type Password</label>
    <input type="password"  name="pass2" id="pass2">
  </div>
</form>

CodePudding user response：

you should get all items has class form-group with querySelectorAll

const arrayElement = document.querySelectorAll('.form-group');

for(let i = 0; i < arrayElement.length; i  )
{
 const errorMessage = document.createElement('span');
 errorMessage.textContent = "invalid input";
 arrayElement[i].appendChild(errorMessage);
}

more : https://jsfiddle.net/7znf685q/2/

CodePudding user response：

You select the parent node through child id and then append you massage.

<script>
    const errorMessage = 'Password Not match';        
    document.getElementById("pass2").parentNode.append(errorMessage);
</script>