Javascript How to add an html element using javascript

Question

can anyone help me to add this icon <i class="fas fa-check-circle"></i> if the background color changes to green using the following code:

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 Code

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

the excepted result is that the icon should be nest to every text field that has been filled.

I don't see an attempt? Have you looked at [`createElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement), and related methods, like [`appendChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild)? — trincot, Jul 28 '21 at 19:12
You cannot `appendChild` an `` element as it is not a container element (meaning it cannot have child elements in it) — Patrick Evans, Jul 28 '21 at 19:14
Can you add the part of the HTML that is relevant for this piece of code, and then also add the expected result (modified HTML)? — trincot, Jul 28 '21 at 19:16
@trincot i aded some of the html code. the excepted result is that the icon should be inside(right end) to every text field that has been filled. — Eljano Hita, Jul 28 '21 at 19:25
It's that "inside(right end)" that needs clarification. Can't you just add to your question the desired outcome in HTML? That will take away all doubts. — trincot, Jul 28 '21 at 19:29

score 1 · Accepted Answer · answered Jul 28 '21 at 19:29

You are trying tp append a child to an input. An input does not have children. You need to add it after the input. Also with your code, it would add a bunch of elements every time it loses focus.

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

score 0 · Answer 2 · answered Jul 28 '21 at 19:24

You cannot add children to an input element. However, you can add the icon next to the input by means of 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">

If you want the icon "inside" the input, then you need to use CSS to set it as a background image, which is not related to "adding a HTML element using JavaScript".

As I said, you can use a background image containing the icon. See this question to know how to do that: https://stackoverflow.com/questions/917610/put-icon-inside-input-element-in-a-form — , Jul 28 '21 at 19:29

score 0 · Answer 3 · answered Jul 28 '21 at 19:36

I would suggest that rather than adding new elements in response to user input, you build all the elements into your html, and then hide/show/style them appropriately with a css class or two:

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>

score -1 · Answer 4 · answered Jul 28 '21 at 19:13

-1

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

answered Jul 28 '21 at 19:13

Abdul Munim

39
1
7

Javascript How to add an html element using javascript

4 Answers4