web-dev-qa-db-ja.com

入力要素のinnerHTMLとは何ですか？

Wikipediaのchromeコンソールからこれを実行しようとしています。検索バーにカーソルを置いてからdocument.activeElement.innerHTML += "some text"しかし、それは機能しません。私はグーグルで検索して他のプロパティと属性を調べましたが、何が間違っているのかわかりませんでした。

activeElementセレクターは正常に機能し、正しい要素を選択しています。

編集：valueプロパティであることがわかりました。だから私は私が求めているものを変えたいです。なぜが変更されないinnerHTMLを変更しても入力要素が機能するのですか？私はそれで何もできないのに、なぜ彼らはその特性を持っていますか？

javascripthtmldomdom-manipulation
19
temporary_user_name

valueの設定は通常、入力/フォーム要素に使用されます。 innerHTMLは通常、div、span、td、および同様の要素に使用されます。

valueは、value属性を持つオブジェクト（通常、フォームコントロール）にのみ適用されます。

innerHtmlは、HTML（div、span、その他多くのコントロール、およびフォームコントロール）を含むことができるすべてのオブジェクトに適用されます。

それらは同等または交換可能ではありません。何を達成しようとしているかによって異なります

26
Ajith S

最初に何を使用するかを理解します。

<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タグボタン内に記述されているinnerHTMLコンテンツです。

11
Shoaib Chikate

入力タグでinnerHTMLを使用すると、次の結果になります。

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

ただし、入力タグは終了タグを必要としないため、次のようにリセットされます。

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

そのため、ブラウザが変更を適用してすぐにリセットしている可能性があります。

5
Jeroen Bollen

このようなことを意味しますか：

$('.activeElement').val('Some text');
4
Hans Preutz

innerHTMLは、要素の指定されたIDにコンテンツを挿入するDOMプロパティです。 DOMを操作するためにJavascriptで使用されます。

例えば：document.getElementById（ "example"）。innerHTML = "my string";

この例では、メソッドを使用してHTML要素（「id = "example"）」を「検索」し、要素の内容（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>

それで全部です

1
K. Oyoo

各HTML要素には、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で関数を記述しました

1
Amarnath Balasubramanian

innerHTMLは、要素の指定されたIDにコンテンツを挿入するDOMプロパティです。 DOMを操作するためにJavascriptで使用されます。

例。

HTML

変化する

Javascript

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

ボタンをクリックして、こんにちは、ケネディ！ innerHTMLがID（「example」）を使用して開始タグと終了タグの間に値（この場合はHello、Kennedy！）を挿入するために表示されます。

そのため、ボタンをクリックした後に要素を調べると、次のコードに気付くでしょう。

<div id=”example”>Hello, Kennedy!</div>
0
K. Oyoo
<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を変更することにより、入力および表示として機能します

0
Gerpstarg
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>
0
Rama

つかいます

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

InnerHTMLの使用は、input要素およびtextContentでは機能しません

0
Ching liu