web-dev-qa-db-fra.com

Qu'est-ce que innerHTML sur les éléments d'entrée?

J'essaie simplement de faire cela à partir de la console chrome de Wikipedia. Je place mon curseur dans la barre de recherche et j'essaie ensuite de faire document.activeElement.innerHTML += "some text" mais cela ne fonctionne pas. J'ai cherché sur Google et examiné les autres propriétés et attributs et je ne pouvais pas comprendre ce que je faisais mal.

Le sélecteur activeElement fonctionne bien, il sélectionne le bon élément.

Edit : Je viens de découvrir que c'est la propriété value. Je voudrais donc changer ce que je demande. Pourquoi changer innerHTML ne fonctionne-t-il pas sur les éléments d'entrée? Pourquoi ont-ils cette propriété si je ne peux rien faire avec?

javascripthtmldomdom-manipulation
17
temporary_user_name

La définition de value est normalement utilisée pour les éléments de saisie/formulaire. innerHTML est normalement utilisé pour les éléments div, span, td et similaires.

value s'applique uniquement aux objets ayant l'attribut value (normalement, les contrôles de formulaire).

innerHtml s'applique à chaque objet pouvant contenir HTML (divs, span, mais beaucoup d'autres et contrôles de formulaire).

Ils ne sont ni équivalents ni remplaçables. Cela dépend de ce que vous essayez d'atteindre

21
Ajith S

D'abord comprendre où utiliser quoi.

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

Ici maintenant 

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

Donc, sur cette ageElem, vous pouvez avoir autant de choses que cet élément contient. Vous pouvez donc utiliser ses attributs value, type etc. Mais ne peut pas utiliser innerHTML car nous n'écrivons rien entre les balises d'entrée.

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

Donc ici Display Age est le contenu innerHTML tel qu’il est écrit à l’intérieur du bouton balise HTML.

11
Shoaib Chikate

L'utilisation de innerHTML sur une balise d'entrée aurait simplement pour résultat: 

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

Mais comme une balise d'entrée n'a pas besoin d'une balise de fermeture, elle sera réinitialisée à:

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

Il est donc probable que vos navigateurs appliquent les modifications et les réinitialisent immédiatement. 

4
Jeroen Bollen

voulez-vous dire quelque chose comme ça:

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

innerHTML est une propriété DOM permettant d'insérer du contenu dans l'id spécifié d'un élément. Il est utilisé en Javascript pour manipuler le DOM.

Par exemple: Document.getElementById ("exemple"). InnerHTML = "ma chaîne";

Cet exemple utilise la méthode pour "trouver" un élément HTML (avec id = "exemple") et remplace le contenu de l'élément (innerHTML) par "ma chaîne":

HTML Changement

Javascript

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

Après avoir cliqué sur le bouton, Hello, World! apparaîtra parce que innerHTML insère la valeur (dans ce cas, Hello, World!) entre les balises d’ouverture et de fermeture avec un id «exemple».

Donc, si vous inspectez l'élément après avoir cliqué sur le bouton, vous verrez le code suivant:

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

C'est tout

1
K. Oyoo

Chaque élément HTML a une propriété innerHTML qui définit à la fois le HTML code et le texte qui se produit entre l'ouverture de cet élément et balise de fermeture. En modifiant le code innerHTML d'un élément après un utilisateur interaction, vous pouvez faire des pages beaucoup plus interactives.

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'/>

Dans l'exemple ci-dessus, la balise b est le innerhtml et le mec est sa valeur. Pour modifier ces valeurs, nous avons écrit une fonction en JScript

1
Amarnath Balasubramanian

innerHTML est une propriété DOM permettant d'insérer du contenu dans l'id spécifié d'un élément. Il est utilisé en Javascript pour manipuler le DOM. 

Exemple .

HTML

Changement

Javascript

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

Sur le bouton Cliquez, bonjour, Kennedy! apparaîtra parce que innerHTML insère la valeur (dans ce cas, Hello, Kennedy!) entre les balises d’ouverture et de fermeture avec un id «exemple».

Ainsi, en inspectant l'élément après avoir cliqué sur le bouton, vous remarquerez le code suivant:

<div id=”example”>Hello, Kennedy!</div>
0
K. Oyoo

Utilisation

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

Utilisation de innerHTML ne fonctionne pas sur les éléments d'entrée ni sur textContent

0
Ching liu