什么是输入元素上的innerHTML

What is innerHTML on input elements?

本文关键字：innerHTML 元素 输入 什么      更新时间：2023-09-26

我只是想在维基百科上的chrome控制台上做这件事。我将光标放在搜索栏中，然后尝试执行document.activeElement.innerHTML += "some text"，但它不起作用。我在谷歌上搜索了一下其他属性和属性，但不知道自己做错了什么。

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

编辑：我刚刚发现它是value属性。所以我想改变我的要求。为什么更改innerHTML对输入元素无效？如果我不能用它做任何事情，他们为什么要拥有它？

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

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

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

它们不是等效的或可替换的。取决于您试图实现的

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

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

现在是

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

所以在这个ageElem上，你可以有很多元素所包含的东西。因此，您可以使用其value、type等属性。但是不能使用innerHTML，因为我们在输入标签之间不写任何东西

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

所以这里Display Age是内部HTML内容，因为它写在HTML标记按钮中。

在输入标记上使用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 来作为输入和显示

每个HTML元素都有一个innerHTML属性，该属性定义了代码和出现在该元素的打开和结束标签。通过在某个用户之后更改元素的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 中编写了一个函数

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

例如：document.getElementById（"example"）.innerHTML="my string"；

本例使用方法"查找"HTML元素（id="example"），并将元素内容（innerHTML）更改为"mystring"：

HTML更改

Javascript

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

点击按钮后，你好，世界！将出现，因为innerHTML将值（在本例中为Hello，World！）插入到id为"example"的开始标记和结束标记之间。

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

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

这就是

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

示例

HTML

更改

Javascript

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

点击按钮，你好，肯尼迪！将出现，因为innerHTML将值（在本例中为Hello，Kennedy！）插入到id为"example"的开始标记和结束标记之间。

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

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

使用

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

使用innerHTML对输入元素和textContent 无效

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

相关文章：