Question

我正在尝试做这样的事情（伪代码）：

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

因此，对于输入，textarea等，它将设置value，但对于div或span，它将设置innerHTML。

或者我应该只设置value和innerHTML，因为innerHTML对输入元素设置无害吗？

Answer 1

如评论中所述，您可以使用

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

"INPUT"和"TEXTAREA"是您正在使用的标记，因此请根据您的需要添加您尝试检测的标记。

Here is a more in-depth explanation of nodeName

作为旁注，您可以将其简化为

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

但只有在您确定传入的任何元素将是一种输入或div时才能执行此操作。

Answer 2

操作员基本应该做的伎俩

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>

Answer 3

您可以使用attributes属性获取标记名称

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

您可以使用in运算符检查任何元素是否具有value属性 - 请参阅下面的演示：

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>

如果您选择jQuery，:input选择器有一个更简单的选项 - 请参阅下面的演示：

$('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：检查元素是否可以接受值

4 个答案: