javascript: check if element can accept a value

Question

I am trying to do something like this (pseudo-code):

if ( element can accept a value )
    element.value = "my new value";
else
    element.innerHTML = "my new value";

So for input, textarea, etc it will set the value, but for div or span it will set the innerHTML.

Or should I simply set both value and innerHTML, since innerHTML is harmless to set for input elements?

Why do you need to do this? Why don't you know whether the element is an input or a content element? — Barmar, Aug 09 '17 at 13:37
I don't think there is a clean way to do that but you could try something like that : `if (element.tagName == 'input' || element.tagName == 'testarea' || ...)` — Alexandre Thyvador, Aug 09 '17 at 13:41
@Barmar the program that renders the HTML will be either sending an inputarea or static text (div), depending on the user's edit permissions. I'd rather not depend on things like checking for a class name to see if it's one of my input elements — C C, Aug 09 '17 at 13:43
You also could use `element.nodeName == "INPUT"` as [explained here](https://stackoverflow.com/questions/254302/how-can-i-determine-the-type-of-an-html-element-in-javascript). — Kevin, Aug 09 '17 at 13:43
@Barmar yeah I just didn't feel like typing out every tag it could be, I figure the asker can sort that out :P — Kevin, Aug 09 '17 at 13:46
@Kevin looks like element.nodeName it is ;-) thanks...and if you want to post up the answer I will gladly accept it. Sorry for the newbie question, I did try to research this. — C C, Aug 09 '17 at 13:47
@Kevin I thought he was trying to avoid having to enumerate all the types, and use something more automatic. — Barmar, Aug 09 '17 at 13:49
Basic check to see if it has the property is all that is needed. No real reason to maintain a list unless you like to maintain lists of elements. — epascarello, Aug 09 '17 at 14:15

score 1 · Answer 1 · answered Aug 09 '17 at 14:07

Basic in operator should do the trick

function hasValue(elem) {
  return 'value' in elem
}

console.log('input', hasValue(document.querySelector('#t1')))
console.log('div', hasValue( document.querySelector('#t2')))
console.log('select', hasValue(document.createElement('select')))
console.log('textarea', hasValue(document.createElement('textarea')))
console.log('h1', hasValue(document.createElement('h1')))
console.log('span', hasValue(document.createElement('span')))

<input type="text" id="t1" />
<div id="t2"></div>

Looks great as a very simple way to check if element is input! — ptyskju, Apr 03 '20 at 19:30

Kevin · Accepted Answer · 2017-08-09T13:59:59.833

As mentioned in the comments, you can use

if (element.nodeName == "INPUT" || element.nodeName == "TEXTAREA") {}

The "INPUT" and "TEXTAREA" are the tags you're using, so add whichever ones you're trying to detect as you see fit.

Here is a more in-depth explanation of nodeName.

As a side note, you can significantly simplify this to

if (element.nodeName != "DIV") {}

But this can only be done if you are certain that any element that gets passed in will be a type of input or a div.

score 0 · Answer 3 · answered Aug 09 '17 at 14:18

You can use the attributes property to get the tag name

function updateElement(elemId) {
  var attr = document.getElementById(elemId).attributes;

  if (attr[0].ownerElement.tagName === 'INPUT') {
    document.getElementById(elemId).value = 'adding to value'
  } else {
    document.getElementById(elemId).innerHTML = 'added in inner html'
  }

}

updateElement('inputElem')
updateElement('divElem')

<input id='inputElem'>
<div id='divElem'></div>

score 0 · Answer 4 · answered Aug 09 '17 at 14:30

You can use in operator to check if any element has the value attribute - see demo below:

Array.prototype.forEach.call(document.body.children, function(element) {
  if ('value' in element)
    element.value = "form";
  else
    element.innerHTML = "not form";
});

<input/>
<div></div>
<textarea></textarea>
<select>
  <option value="not form">Not form</option>
  <option value="form">Form</option>
</select>

If you are opting for jQuery, there's a simpler option the :input selelctor - see demo below:

$('body').children().each(function() {
  if ($(this).is(':input'))
    $(this).val("form");
  else
    $(this).html("not form");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input/>
<div></div>
<textarea></textarea>
<select>
  <option value="not form">Not form</option>
  <option value="form">Form</option>
</select>

javascript: check if element can accept a value

4 Answers4