Whats an alternative way for innerHTML

Question

I am trying to make a form validation with javascript. I am wondering, instead of innerHTML to show my error message are there another way of showing my error message.

Here is the Code:

<form>
<p>
Email Address:<br>
<input type="text" id="email-address" name="email" style="width:200px;">
</p>
<p id="my-error-message-container" style="display:none; border:1px solid red; color:red; background-color:yellow; font-weight:bold; padding:5px; width:188px; position: relative;"></p>
<input type="submit" value="Submit Form" style="width:200px;" onclick="return ErrorCheck()">
</form>

<script type="text/javascript">
function RemoveErrorMessageFromPage()
{
   var IDofContainer = "my-error-message-container";
   document.getElementById(IDofContainer).innerHTML = "";
   document.getElementById(IDofContainer).style.display = "none";
}

function InsertErrorMessageIntoPage(content)
{
   var IDofContainer = "my-error-message-container";
   document.getElementById(IDofContainer).style.display = "";
   document.getElementById(IDofContainer).innerHTML = content;
}

function ErrorCheck()
{
   RemoveErrorMessageFromPage();
   var email = document.getElementById("email-address").value;
   if( ! email.length )
   {
      InsertErrorMessageIntoPage("The email address is required.");
      return false;
   }
   if( ! email.match(/\w@\w+\.\w/) )
   {
      InsertErrorMessageIntoPage("The email address appears to be invalid.");
      return false;
   }
   return true;
}
</script>

You can use `innerText` if you don't want it to be interpreted as HTML. That's about it. — Barmar, Apr 15 '19 at 21:45
You can remove all elements inside P and then add again using `append` — Ioseb Khutsishvili, Apr 15 '19 at 21:47
You can accept one answer (if it helps you) by click on big gray check button on its left side. If you wish you can add +10 points to any author of any good answer by click upper gray triangle — Kamil Kiełczewski, Apr 16 '19 at 03:47

score 0 · Accepted Answer · answered Apr 15 '19 at 21:48

Your approach (having an HMTL element for an error message and setting its text and visibility as appropriate when an error occurs / is resolved) is fine. Usually, textContent is proffered over innerHTML as it's more explicit (you're setting text, not HTML which happens to be text).

The MDN page for textContent actually compares textContent, innerHTML, and innerText, 3 similar attributes.

Kamil Kiełczewski · Answer 2 · 2019-04-16T03:49:05.060

-1

Here is faster alternative (more)

err.insertAdjacentHTML('afterbegin','My error message');

.err { color: red }

<div id="err" class="err"></div>

edited Apr 16 '19 at 03:49

answered Apr 15 '19 at 21:48

Kamil Kiełczewski

85,173
29
368
345

Whats an alternative way for innerHTML

2 Answers2