[英]Javascript How to add an html element using javascript
如果使用以下代码将背景颜色更改为绿色,任何人都可以帮助我添加此图标<i class="fas fa-check-circle"></i>
:
document.querySelectorAll('input').forEach((inp) => {
inp.addEventListener('focusout', () => {
let value = inp.value.split(' ').join('')
if (value == '') {
inp.style.backgroundColor = "red";
} else {
inp.style.backgroundColor = "green";
let icon = document.createElement('i')
icon.classList.add('fas', 'fa-check-circle')
inp.appendChild(icon)
}
})
})
HTML代码
<section class="control-group">
<label class="control-label" for="company">Company</label>
<div class="controls">
<input
autofocus=""
class="input-xlarge"
id="company"
name="company"
placeholder="Company name"
type="text"
value=""
/>
</div>
</section>
<section class="control-group">
<label class="control-label" for="fname">Name</label>
<div class="controls two-col">
<input
class="input-medium"
id="fname"
name="fname"
placeholder="First name"
type="text"
value=""
/>
</div>
例外的结果是图标应该嵌套在每个已填充的文本字段中。
您正在尝试将子项附加到输入。 输入没有孩子。 您需要在输入后添加它。 同样对于您的代码,每次失去焦点时它都会添加一堆元素。
document.querySelectorAll('input').forEach((inp) => { let icon = document.createElement('i') icon.classList.add('fas', 'fa-check-circle', 'hidden') inp.after(icon); inp.addEventListener('focusout', () => { let value = inp.value.split(' ').join('') if (value == '') { inp.style.backgroundColor = "red"; icon.classList.add('hidden'); } else { icon.style.display = 'inilne-block'; inp.style.backgroundColor = "green"; icon.classList.remove('hidden'); } }) })
input { padding-right: 20px; } input + i { position: absolute; margin-left: -20px; } i.hidden { display: none; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <input type="text"><input type="text"><input type="text">
您不能向输入元素添加子元素。 但是,您可以通过insertAdjacentHTML()
在输入旁边添加图标。
document.querySelectorAll('input').forEach((inp) => { inp.addEventListener('focusout', () => { let value = inp.value.split(' ').join('') if (value == '') { inp.style.backgroundColor = "red"; } else { inp.style.backgroundColor = "green"; inp.insertAdjacentHTML('afterend', '<i class="fas fa-check-circle">Your icon here</i>'); } }) })
<input type="text">
如果您希望图标“在”输入中,则需要使用 CSS 将其设置为背景图像,这与“使用 JavaScript 添加 HTML 元素”无关。
我建议不要添加新元素来响应用户输入,而是将所有元素构建到 html 中,然后使用一两个 css 类适当地隐藏/显示/样式化它们:
document.querySelectorAll('input').forEach((inp) => { inp.addEventListener('focusout', () => { const parent = inp.parentNode; let value = inp.value.split(' ').join(''); if (value == '') { parent.classList.remove("valid"); parent.classList.add("invalid"); } else { parent.classList.remove("invalid"); parent.classList.add("valid"); } }); });
.controls i { display: none; } .controls.valid input { background-color: green; } .controls.valid i { display: inline; } .controls.invalid input { background-color: red; }
<section class="control-group"> <label class="control-label" for="company">Company</label> <div class="controls"> <input autofocus="" class="input-xlarge" id="company" name="company" placeholder="Company name" type="text" value="" /> <i class="fas fa-check-circle">test</i> </div> </section> <section class="control-group"> <label class="control-label" for="fname">Name</label> <div class="controls two-col"> <input class="input-medium" id="fname" name="fname" placeholder="First name" type="text" value="" /> <i class="fas fa-check-circle">test</i> </div> </section>
elem = document.createElement("<div id='myID'> my Text </div>");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.