关于javascript：输入元素上的innerHTML是什么？


What is innerHTML on input elements?

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

activeElement选择器工作正常，它正在选择正确的元素。

编辑：我只是发现它是value属性。 所以我想改变我的要求。 为什么更改innerHTML不能在输入元素上起作用？ 如果我对此无能为力，他们为什么拥有该财产？

相关讨论

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

value仅适用于具有value属性的对象(通常是窗体控件)。

innerHTML适用于可以包含HTML的每个对象(div，span，但还有许多其他控件以及窗体控件)。

它们不是等效或不可替换的。取决于您要实现的目标

相关讨论

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

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

现在这里

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

因此，在此ageElem上，您可以拥有该元素包含的许多东西，因此可以使用其value，type等属性。但是不能使用innerHTML，因为我们不在输入标记之间写任何东西

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

因此，Display Age是内部HTML内容，因为它是在HTML标记按钮中编写的。

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

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

但是，由于输入标签不需要结束标签，因此它将重置为：

因此，您的浏览器可能正在应用更改并立即将其重置。

你的意思是这样的：

1
$('.activeElement').val('Some text');
1
2
3
4
5
6
7
8
9
10
11
12
<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用作输入和显示

innerHTML是一个DOM属性，用于将内容插入到元素的指定ID中。它在Javascript中用于操纵DOM。

例如：
document.getElementById(" example")。innerHTML ="我的字符串";

本示例使用该方法"查找" HTML元素(id为" example")，并将元素内容(innerHTML)更改为"我的字符串"：

的HTML
更改

Java脚本

1
2
3
function change(){
  document.getElementById("example").innerHTML ="Hello, World!"
}

单击按钮后，您好，世界！之所以会出现，是因为innerHTML将值(在本例中为Hello，World！)插入ID为" example"的开始和结束标记之间。

因此，如果在单击按钮后检查元素，您将看到以下代码：

1
Hello, World!

就这样

Each HTML element has an innerHTML property that defines both the HTML
code and the text that occurs between that element's opening and
closing tag. By changing an element's innerHTML after some user
interaction, you can make much more interactive pages.

脚本

1
2
3
4
<script type="text/javascript">
function changeText(){
    document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}

的HTML

1
2
3
4
<p>
Welcome to Stack OverFlow <b id='boldStuff'>dude
</p>
<input type='button' onclick='changeText()' value='Change Text'/>

在上面的示例中，b标签是innerhtml，dude是其值，因此要更改这些值，我们已在JScript中编写了一个函数

相关讨论

1
2
var lat = document.getElementById("lat").value;
lat.value = position.coords.latitude;
1
2
<input type="text" id="long" class="form-control" placeholder="Longitude">
<button onclick="getLocation()" class="btn btn-default">Get Data</button>

不再使用InnerHTML use值作为输入类型

使用

1
document.querySelector('input').defaultValue ="sometext"

使用innerHTML在输入元素和textContent上均不起作用

innerHTML是一个DOM属性，用于将内容插入到元素的指定ID中。它在Javascript中用于操纵DOM。

例。

的HTML

Change

Java脚本

1
2
3
function FunctionName(){
  document.getElementById("example").innerHTML ="Hello, Kennedy!"
}

在按钮上单击，您好，肯尼迪！之所以会出现，是因为innerHTML将值(在这种情况下为Hello，Kennedy！)插入到ID为" example"的开始标记和结束标记之间。

因此，在单击按钮后检查元素时，您会注意到以下代码：

1
Hello, Kennedy!