如何将元素附加到具有类名称的 div 的元素,该元素具有 ID 名称的子元素
How to append an element to a div with className that have a child elemnt with idName
MY html 有多个 div 共享相同的 class 名称并且它们具有具有唯一 ID 的输入元素,我想在所有这些输入下附加一个跨度JavaScript 不编辑 html。
这是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()
并迭代。
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>
您应该使用 querySelectorAll
获取所有具有 class form-group 的项目
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);
}
你select父节点通过child id然后追加你massage.
<script>
const errorMessage = 'Password Not match';
document.getElementById("pass2").parentNode.append(errorMessage);
</script>
MY html 有多个 div 共享相同的 class 名称并且它们具有具有唯一 ID 的输入元素,我想在所有这些输入下附加一个跨度JavaScript 不编辑 html。
这是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()
并迭代。
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>
您应该使用 querySelectorAll
获取所有具有 class form-group 的项目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);
}
你select父节点通过child id然后追加你massage.
<script>
const errorMessage = 'Password Not match';
document.getElementById("pass2").parentNode.append(errorMessage);
</script>