web-dev-qa-db-fra.com

Comment afficher des variables JavaScript dans une page HTML sans document.write

J'essaie d'afficher des variables JavaScript sur ma page HTML. 

J'utilisais pour la première fois document.write(), mais ce dernier écrasait la page en cours lorsque la fonction était appelée. 

Après avoir cherché, le consensus général était que document.write() n'était pas très apprécié. Quelles sont les autres options? 

J'ai trouvé une page suggérant d'utiliser .innerHTML mais celle-ci a été écrite en 2005. 

Un jsFiddle illustrant mon problème http://jsfiddle.net/xHk5g/

javascriptjqueryhtmlhtml5
60
kishan patel

Element.innerHTML est à peu près la voie à suivre. Voici quelques façons de l'utiliser:

HTML

<div class="results"></div>

JavaScript

// 'Modern' browsers (IE8+, use CSS-style selectors)
document.querySelector('.results').innerHTML = 'Hello World!';

// Using the jQuery library
$('.results').html('Hello World!');

Si vous souhaitez simplement mettre à jour une partie d'un <div>, j'ajoute généralement un élément vide avec une classe telle que value ou un élément que je souhaite remplacer par le contenu de <div> principal. par exemple.

<div class="content">Hello <span class='value'></span></div>

Ensuite, j'utiliserais un code comme celui-ci:

// 'Modern' browsers (IE8+, use CSS-style selectors)
document.querySelector('.content .value').innerHTML = 'World!';

// Using the jQuery library
$(".content .value").html("World!");

Alors le HTML/DOM contiendrait maintenant:

<div class="content">Hello <span class='value'>World!</span></div>

Exemple complet. Cliquez sur exécuter extrait pour l'essayer.

// Plain Javascript Example
var $jsName = document.querySelector('.name');
var $jsValue = document.querySelector('.jsValue');

$jsName.addEventListener('input', function(event){
  $jsValue.innerHTML = $jsName.value;
}, false);


// JQuery example
var $jqName = $('.name');
var $jqValue = $('.jqValue');

$jqName.on('input', function(event){
  $jqValue.html($jqName.val());
});
html {
  font-family: sans-serif;
  font-size: 16px;
}

h1 {
  margin: 1em 0 0.25em 0;
}

input[type=text] {
  padding: 0.5em;
}

.jsValue, .jqValue {
  color: red;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Setting HTML content example</title>
</head>
<body>
  <!-- This <input> field is where I'm getting the name from -->
  <label>Enter your name: <input class="name" type="text" value="World"/></label>
  
  <!-- Plain Javascript Example -->
  <h1>Plain Javascript Example</h1>Hello <span class="jsValue">World</span>
  
  <!-- jQuery Example -->
  <h1>jQuery Example</h1>Hello <span class="jqValue">World</span>
</body>
</html>

92
pseudosavant

Vous pouvez utiliser javascript pour accéder aux éléments de la page et modifier leur contenu. Ainsi, par exemple, vous pourriez avoir une page avec une balise HTML comme ceci:

<div id="MyEdit">
    This text will change
</div>

Vous pouvez utiliser javascript pour changer le contenu comme suit ...

document.getElementById("MyEdit").innerHTML = "My new text!";​

Voici un exemple de travail

Vous pouvez également utiliser la bibliothèque javascript JQuery pour la manipulation du DOM. Elle dispose de fonctionnalités intéressantes qui facilitent grandement ce processus.

Par exemple, avec JQuery, vous pouvez le faire pour obtenir le même résultat ...

$("#MyEdit").html("My new text!");

Voici un exemple de travail de la version de JQuery

Basé sur cet exemple que vous avez fourni dans votre message. Le JQuery suivant fonctionnerait pour vous:

var x = "hello wolrd";
$("p").html(x);

Voici la version de travail

L'utilisation d'une balise P comme celle-ci n'est toutefois pas recommandée. Vous voudriez idéalement utiliser un élément avec un identifiant unique afin de vous assurer que vous sélectionnez le bon avec JQuery.

13
musefan

il y a différentes façons de faire cela. Une des manières serait d'écrire un script en récupérant une commande 

var name="kieran";
document.write=(name);

ou nous pourrions utiliser la méthode JavaScript par défaut pour l’imprimer. 

var name="kieran";
document.getElementById("output").innerHTML=name;

and the html code would be: 

<p id="output"></p>

j'espère que cela a aidé :)

5
StandOrFall

Vous pouvez utiliser jQuery pour obtenir l'élément HTML avec lequel vous voulez charger la valeur.

Dites par exemple si votre page ressemble à ceci,

<div id="FirstDiv">
  <div id="SecondDiv">
     ...
  </div>
 </div>

Et si votre javascript (j'espère) a quelque chose d'aussi simple que cela,

function somefunction(){
  var somevalue = "Data to be inserted";
  $("#SecondDiv").text(somevalue);
}

J'espère que c'est ce que vous cherchiez.

3
Ajai

innerHTML est correct et toujours valide. Utilisez-le tout le temps sur des projets grands et petits. Je viens de basculer vers un onglet ouvert dans mon IDE et il y en avait un juste là. 

 document.getElementById("data-progress").innerHTML = "<img src='../images/loading.gif'/>";

Peu de choses ont changé dans la manipulation de js + dom depuis 2005, mis à part l'ajout de plus de bibliothèques. Vous pouvez facilement définir d’autres propriétés telles que

   uploadElement.style.width = "100%";
2
FlavorScape

Si vous souhaitez éviter innerHTML, vous pouvez utiliser les méthodes DOM pour construire des éléments et les ajouter à la page.

​var element = document.createElement('div');
var text = document.createTextNode('This is some text');
element.appendChild(text);
document.body.appendChild(element);​​​​​​
2
david

salut voici un exemple simple: <div id="test">content</div> et 

var test = 5;
document.getElementById('test').innerHTML = test;

et vous pouvez le tester ici: http://jsfiddle.net/SLbKX/

1
djoStack

Ajoutez un élément à votre page (par exemple, un div) et écrivez dans cette div.

HTML: 

<html>
    <header>
        <title>Page Title</title>
    </header>

    <body>
        <div id="myDiv"></div>
    </body>
</html>

jQuery:

$('#myDiv').text('hello world!');

javascript:

document.getElementById('myDiv').innerHTML = 'hello world!';
0
jbabey

Semblable à ce qui précède, mais j'ai utilisé (c'était en CSHTML):

JavaScript:

var value = "Hello World!"<br>
$('.output').html(value);

CSHTML:

<div class="output"></div>
0
Crazy Cat