web-dev-qa-db-ja.com

document.writeを使用せずにHTMLページにJavaScript変数を表示する方法

HTMLページにJavaScript変数を表示しようとしています。

最初はdocument.write()を使用していましたが、関数が呼び出されたときに現在のページを上書きするために使用していました。

周りを検索した後、一般的なコンセンサスは、document.write()はあまり好きではないということでした。他のオプションは何ですか？

.innerHTMLの使用を提案するページを見つけましたが、それは2005年に書かれました。

私の問題を示すjsFiddle http://jsfiddle.net/xHk5g/

javascriptjqueryhtmlhtml5
60
kishan patel

Element.innerHTMLがほとんどの方法です。以下にいくつかの使用方法を示します。

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

<div>の一部を更新したい場合は、通常、valueのようなクラスの空の要素を追加するか、メインの<div>の内容を置き換えます。例えば.

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

次に、次のようなコードを使用します。

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

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

次に、HTML/DOMに次が含まれます。

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

完全な例。 [スニペットを実行]をクリックして試してください。

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

JavaScriptを使用して、ページ上の要素にアクセスし、その内容を変更できます。たとえば、次のようなHTMLマークアップを含むページがあるとします。

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

JavaScriptを使用してコンテンツを次のように変更できます。

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

これが実際の例です

JQuery javascript library を使用してDOM操作を行うこともできます。これには、このようなことを非常に簡単にする優れた機能がいくつかあります。

たとえば、JQueryを使用すると、同じ結果を得るためにこれを実行できます...

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

JQueryバージョンの実際の例

この例 に基づいて投稿で提供しました。次のJQueryが役立ちます。

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

これが作業バージョンです

ただし、このようなPタグの使用は推奨されません。 JQueryで正しいものを選択していることを確認できるように、一意のIDを持つ要素を使用することが理想的です。

13
musefan

これを行うにはさまざまな方法があります。 1つの方法は、コマンドを取得するスクリプトを作成することです。そのようです：

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

または、デフォルトのJavaScriptを使用して印刷することもできます。

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

and the html code would be: 

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

これが役に立てば幸いです:)

5
StandOrFall

Jqueryを使用して、値をロードするhtml要素を取得できます。

たとえば、ページが次のように見える場合、

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

そして、もしあなたのjavascript（私が望んでいる）がこのような単純なものに見えるなら、

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

これがあなたが探していたものであることを願っています。

3
Ajai

innerHTMLは問題なく、まだ有効です。大小さまざまなプロジェクトで常に使用してください。 IDEで開いているタブに切り替えたところ、そこにタブが1つありました。

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

2005年以降、js + dom操作では、ライブラリの追加を除いてあまり変化はありません。次のような他のプロパティを簡単に設定できます

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

InnerHTMLを避けたい場合は、DOMメソッドを使用して要素を構築し、ページに追加できます。

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

こんにちは、簡単な例です：<div id="test">content</div>および

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

ここでテストできます： http://jsfiddle.net/SLbKX/

1
djoStack

ページに要素（divなど）を追加し、その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

上記に似ていますが、私が使用しました（これはCSHTMLにありました）：

JavaScript：

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

CSHTML：

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