Javascript 如何使用 javascript 添加 html 元素

Question

如果使用以下代碼將背景顏色更改為綠色，任何人都可以幫助我添加此圖標<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>

例外的結果是圖標應該嵌套在每個已填充的文本字段中。

Answer 1

您正在嘗試將子項附加到輸入。 輸入沒有孩子。 您需要在輸入后添加它。 同樣對於您的代碼，每次失去焦點時它都會添加一堆元素。

 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">

Answer 2

您不能向輸入元素添加子元素。 但是，您可以通過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 元素”無關。

Answer 3

我建議不要添加新元素來響應用戶輸入，而是將所有元素構建到 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>

Answer 4

elem = document.createElement("<div id='myID'> my Text </div>");