输入元素上的innerHTML是什么？

Question

我只是想在维基百科的Chrome控制台中尝试这样做。我将光标放在搜索栏中，然后尝试执行document.activeElement.innerHTML += "some text"，但它不起作用。我搜索了一下并查看了其他属性和属性，但无法弄清楚我的错误在哪里。 activeElement选择器很好用，可以选择正确的元素。

编辑：我刚刚发现它是value属性。所以我想改变我的问题。为什么在输入元素上更改innerHTML不起作用？如果我什么也做不了，他们为什么要有那个属性呢？

- temporary_user_name

---

刚找到了，它是 value 属性。但还是回答一下吧，也许能帮助其他人。 - temporary_user_name

请将以下与编程相关的内容从英文翻译成中文。只需返回翻译后的文本即可，不要进行解释。 - Arun P Johny

你其实可以回答自己的问题 :) - nbrooks

看我的编辑！我改变了问题。 - temporary_user_name

@FelixKling，啊，我的意思是input，那是我的错误。 - temporary_user_name

Answer 1

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

value仅适用于具有值属性的对象（通常是表单控件）。

innerHtml适用于任何可以包含HTML（div、span，以及许多其他元素和表单控件）的对象。

它们并不相同或可替换。取决于您要实现什么目的。

- Ajith S

---

很棒的回答，兄弟。继续加油。我的+1。 - Praveen Prasannan

@PraveenPrasannan 这是一个使用价值的例子 js: var a = document.getElementById('info'); a.value = '地球是圆的'; 然后在你的html中： <input type="text" name="lname" id="info"> - don_Bigote

Answer 2

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

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

现在在这里

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

在这个ageElem上，您可以拥有该元素包含的许多内容。因此，您可以使用其value，type等属性。但是不能使用innerHTML，因为我们不在input标签之间编写任何内容。

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

所以这里的 Display Age 是指在 HTML 标签 button 中直接编写的 innerHTML 内容。

- Shoaib Chikate

Answer 3

在输入标签上使用innerHTML将只会产生以下结果：

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

但是，因为输入标签不需要关闭标签，它将被重置为：

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

所以你的浏览器可能会应用更改并立即重置它。

- Jeroen

Answer 4

你是不是指这样的内容：

$('.activeElement').val('Some text');

- Hans Preutz

Answer 5

<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既可以作为输入，也可以作为显示。最初的回答：该输入字段可用于输入和显示，通过更改.value属性实现。

- Gerpstarg

Answer 6

每个HTML元素都有一个innerHTML属性，它定义了该元素的开放和关闭标签之间出现的HTML代码和文本。通过在某些用户交互后更改元素的innerHTML，您可以创建更加交互式的页面。

JScript

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

HTML

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

在上面的例子中，b标签是innerhtml，dude是它的值，所以为了改变这些值，我们已经在JScript中编写了一个函数。

- Amarnath Balasubramanian

---

http://www.design2core.com/myblog/css/how-to-use-new-indian-rupee-symbolwebrupee-on-your-webpage-or-blog/ - Amarnath Balasubramanian

Answer 7

innerHTML 是一个 DOM 属性，用于将内容插入到指定元素的 id 中。它被用于 Javascript 中来操作 DOM。

例如： document.getElementById("example").innerHTML = "my string";

这个例子使用该方法 “查找” 一个具有 id="example" 的 HTML 元素，并将元素内容 (innerHTML) 更改为 "my string":

HTML 更改

Javascript

function change(){
  document.getElementById(“example”).innerHTML = “Hello, World!”
}

在你点击按钮之后，“Hello, World!” 将会出现，因为 innerHTML 将这个值（在这个例子中是“Hello, World!”）插入到 id 为“example”的开标签和闭标签之间。

所以，如果你在点击按钮后检查元素，你将会看到以下代码：

<div id=”example”>Hello, World!</div>

就这些了

- Kennedy Oyoo

Answer 8

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

示例。

HTML

更改

Javascript

function FunctionName(){
  document.getElementById(“example”).innerHTML = “Hello, Kennedy!”
}

当按钮被点击时，"Hello, Kennedy!" 将会出现，因为 innerHTML 将这个值（在这种情况下是 "Hello, Kennedy!"）插入到带有 id "example" 的开标签和闭标签之间。

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

<div id=”example”>Hello, Kennedy!</div>

- Kennedy Oyoo

Answer 9

使用

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

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

- Ching liu

Answer 10

var lat = document.getElementById("lat").value;
lat.value = position.coords.latitude;

<input type="text" id="long" class="form-control" placeholder="Longitude">
<button onclick="getLocation()" class="btn btn-default">Get Data</button>

Instaed of using InnerHTML use Value for input types

- Rama