wake-up-neo.com

Anzeigen von JavaScript-Variablen in einer HTML-Seite ohne document.write

Ich versuche, einige JavaScript-Variablen auf meiner HTML-Seite anzuzeigen. 

Ich habe zuerst document.write() verwendet, aber beim Aufruf der Funktion wurde die aktuelle Seite überschrieben. 

Nach dem Durchsuchen war der allgemeine Konsens, dass document.write() nicht sehr beliebt ist. Was sind die anderen Optionen? 

Ich habe eine Seite mit der Verwendung von .innerHTML gefunden, die aber 2005 geschrieben wurde. 

Eine jsFiddle, die mein Problem veranschaulicht http://jsfiddle.net/xHk5g/

60
kishan patel

Element.innerHTML ist so ziemlich der Weg. Hier sind einige Möglichkeiten, es zu benutzen:

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!');

Wenn Sie nur einen Teil eines <div> aktualisieren möchten, füge ich normalerweise nur ein leeres Element mit einer Klasse wie value hinzu oder eines, dessen Inhalt ich zum <div> ersetzen möchte. z.B.

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

Dann würde ich so etwas Code verwenden:

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

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

Dann würde das HTML/DOM jetzt enthalten:

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

Vollständiges Beispiel Klicken Sie auf Ausführen, um es auszuprobieren.

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

Sie können Javascript verwenden, um auf Elemente auf der Seite zuzugreifen und deren Inhalt zu ändern. So haben Sie beispielsweise eine Seite mit HTML-Markup:

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

Sie können Javascript verwenden, um den Inhalt wie folgt zu ändern ...

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

Hier ist ein Arbeitsbeispiel


Sie können sich auch die JavaScript-Bibliothek JQuery ansehen für die DOM-Manipulation. Es hat einige großartige Funktionen, um das zu vereinfachen.

Mit JQuery können Sie zum Beispiel dasselbe Ergebnis erzielen ...

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

Hier ist ein Arbeitsbeispiel der JQuery-Version


Basierend auf diesem Beispiel , das Sie in Ihrem Beitrag angegeben haben. Die folgende JQuery würde für Sie funktionieren:

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

Hier ist die Arbeitsversion

Die Verwendung eines P-Tags wie diesem wird jedoch nicht empfohlen. Idealerweise möchten Sie ein Element mit einer eindeutigen ID verwenden, um sicherzustellen, dass Sie mit JQuery das richtige Element auswählen.

13
musefan

es gibt verschiedene Möglichkeiten, dies zu tun. Eine Möglichkeit wäre, ein Skript zu schreiben, das einen Befehl abruft. So wie folgt: 

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

oder wir könnten die Standard-JavaScript-Methode verwenden, um es zu drucken. 

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

and the html code would be: 

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

ich hoffe das hat geholfen :)

5
StandOrFall

Sie können jquery verwenden, um das HTML-Element zu erhalten, mit dem Sie den Wert laden möchten.

Sagen Sie zum Beispiel, ob Ihre Seite so aussieht,

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

Und wenn Ihr Javascript (ich hoffe) etwas so einfaches sieht,

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

Ich hoffe, das ist, wonach Sie gesucht haben.

3
Ajai

innerHTML ist in Ordnung und noch gültig. Verwenden Sie es ständig für große und kleine Projekte. Ich bin gerade zu einem offenen Tab in meiner IDE gewechselt und dort war genau einer. 

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

Seit 2005 hat sich bei der Manipulation von js + dom nicht viel geändert, außer dass weitere Bibliotheken hinzugefügt wurden. Sie können leicht andere Eigenschaften einstellen, wie z

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

Wenn Sie innerHTML vermeiden möchten, können Sie die DOM-Methoden verwenden, um Elemente zu erstellen und an die Seite anzuhängen.

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

hi hier ist ein einfaches Beispiel: <div id="test">content</div> und 

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

und Sie können es hier testen: http://jsfiddle.net/SLbKX/

1
djoStack

Fügen Sie Ihrer Seite ein Element hinzu (z. B. ein div) und schreiben Sie dieses 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

Ähnlich wie oben, aber ich habe verwendet (dies war in CSHTML):

JavaScript:

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

CSHTML:

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