什么是输入元素上的innerHTML?

IT技术 javascript html dom dom-manipulation
2021-01-25 07:06:11

我只是想从 Wikipedia 上的 chrome 控制台执行此操作。我将光标放在搜索栏中,然后尝试执行document.activeElement.innerHTML += "some text"但不起作用。我用谷歌搜索并查看了其他属性和属性,但无法弄清楚我做错了什么。

activeElement选择器工作正常,但选择正确的元素。

编辑:我刚刚发现它是value财产。所以我想改变我的要求。为什么改变innerHTML输入元素的工作?如果我不能用它做任何事情,他们为什么要拥有该财产?

6个回答

设置value通常用于输入/表单元素。innerHTML通常用于 div、span、td 和类似元素。

value 仅适用于具有 value 属性的对象(通常为表单控件)。

innerHtml适用于每个可以包含的对象HTML(div、跨度,但还有许多其他控件和表单控件)。

它们不是等效的或可替换的。取决于你想要达到的目标

@PraveenPrasannan 这里是一个使用 js 的值的例子: var a = document.getElementById('info'); a.value = 'the earth is round';然后在你的 html 中:<input type="text" name="lname" id="info">
2021-04-02 07:06:11
很好的答案兄弟。继续前进。我的 +1
2021-04-05 07:06:11

首先了解在哪里使用什么。

<input type="text" value="23" id="age">

现在这里

var ageElem=document.getElementById('age');

所以在这ageElem你可以有很多事情是什么元素contains.So你可以使用它valuetype等属性。但是不能使用innerHTML,因为我们没有在输入标签之间写任何东西

  <button id='ageButton'>Display Age</button>

所以这里Display Age是写在 HTML 标签按钮内的 innerHTML 内容。

在 input 标签上使用 innerHTML 只会导致:

<input name="button" value="Click" ... > InnerHTML Goes Here </input>

但是因为输入标签不需要结束标签,它会被重置为:

<input name="button" value="Click" ... />

因此,您的浏览器很可能正在应用更改并立即重置它。

你的意思是这样的:

$('.activeElement').val('Some text');
<input id="input" type="number">

document.getElementById("input").addEventListener("change", GetData);

function GetData () {
  var data = document.getElementById("input").value;
  console.log(data);
  function ModifyData () {
    document.getElementById("input").value = data + "69";
  };
  ModifyData();
};

我的评论:这里输入字段通过更改 .value 作为输入和显示