jQuery - How to determine between val and HTML?

Question

Is there a way in jQuery to determine whether an element has a value or innerhtml (or both)? For example, if the element is input then it has a val and I can use:

$(this).val();

But if it's a div then I need to use:

$(this).html();

I need to know whether I have to use val or HTML. My piece of jQuery is:

$(".myclass").each(function(idx){
  if (this is a val based element)
    use val
  else
    use html
});

Answer 1

Try this fiddle.

Html:

<div></div>
<input/>
<textarea></textarea>
<select>
    <option>foo</option>
    <option>baz</option>
</select>​

Code:

changeText("div", "baz");
changeText("input", "baz");
changeText("textarea", "baz");
changeText("select", "baz");

function changeText(selector, text) {
    var element = $(selector);
    var attr = element.attr('value');
    if (typeof attr !== 'undefined' && attr !== false) {
        element.val(text);
    } else {
        element.text(text);        
    }
}

Answer 2

$(".myclass").each(function(k, v){
    var data = ($(v).val() ?: $(v).html());
});

Try to get data from .val(), if nothing was returned use .html().

Answer 3

this.tagName will tell you which element type you have. jQuery object doesn't have tagName property.

Answer 4

This should do the trick:

See DEMO

$(".myclass").each(function(idx){
    if (this.hasOwnProperty('value'))
        //use val
    else
        //use html
});