如何将元素附加到具有className的div中，该div具有idName的子元素

MY html有多个共享相同类名的div，它们有具有唯一id的输入元素，我想在不编辑html的情况下，用JavaScript在所有这些输入下添加一个span。

这是html 的一部分

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

这是我的JS来创建和附加跨度

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

但这只会在第一个div中创建一个跨度

您应该使用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);
}

更多：https://jsfiddle.net/7znf685q/2/

使用querySelectorAll()并迭代。

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

querySelector只获取第一个实例。您需要使用querySelectorAll。然后把所有东西都放在一个循环里

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 class="form-group">
<label for="pass">Password</label>
<input type="password" class="form-control" name="pass" id="pass">
</div>
<div class="form-group">
<label for="pass2">Re-Type Password</label>
<input type="password" class="form-control" name="pass2" id="pass2">
</div>
</form>

您通过子id选择父节点，然后附加您的消息。

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

相关内容

最新更新

热门标签：