blocks|key|410741|text|您可以使用jquery来获取要用来加载值的html元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|410742|例如，如果你的页面看起来像这样，|410743|<div+id="FirstDiv">
++<div+id="SecondDiv">
+++++...
++</div>
+</div>|code-block|syntax|javascript|410744|如果你的javascript+(我希望)看起来像这样简单，|410745|function+somefunction(){
++var+somevalue+=+"Data+to+be+inserted";
++$("#SecondDiv").text(somevalue);
}|410746|我希望这就是你要找的。|410747|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>You could use jquery to get hold of the html element that you want to load the value with.</p>

<p>Say for instance if your page looks something like this,</p>

<pre><code>&lt;div id="FirstDiv"&gt;
  &lt;div id="SecondDiv"&gt;
     ...
  &lt;/div&gt;
 &lt;/div&gt;
</code></pre>

<p>And if your javascript (I hope) looks something as simple as this,</p>

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

<p>I hope this is what you were looking for.</p>


blocks|key|625919|text|Element.innerHTML几乎就是我们要走的路。这里有几种使用它的方法：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|625920|HTML|625921|<div+class="results"></div>|code-block|syntax|javascript|625922|JavaScript|625923|//+'Modern'+browsers+(IE8%2B,+use+CSS-style+selectors)
document.querySelector('.results').innerHTML+=+'Hello+World!';

//+Using+the+jQuery+library
$('.results').html('Hello+World!');|625924|如果您只想更新<div>的一部分，我通常只需要在主<div>中添加一个带有value类的空元素，或者添加一个我想替换其内容的类。例如：|625925|<div+class="content">Hello+<span+class='value'></span></div>|625926|然后我会使用如下代码：|625927|//+'Modern'+browsers+(IE8%2B,+use+CSS-style+selectors)
document.querySelector('.content+.value').innerHTML+=+'World!';

//+Using+the+jQuery+library
$(".content+.value").html("World!");|625928|那么HTML/DOM现在将包含：|625929|<div+class="content">Hello+<span+class='value'>World!</span></div>|625930|完整的示例。单击run+snippet以试用它。|625931|​|625932|//+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());
});|625933|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;
}|625934|<!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>
++
++<label>Enter+your+name:+<input+class="name"+type="text"+value="World"/></label>
++
++
++<h1>Plain+Javascript+Example</h1>Hello+<span+class="jsValue">World</span>
++
++
++<h1>jQuery+Example</h1>Hello+<span+class="jqValue">World</span>
</body>
</html>|625935|625936|entityMap^0|0|H|0|0|0|0|0|7|5|P|5|11|5|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1I|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1J|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1K|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1L|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1M|8|@$9|1N|A|1O|B|C]|$9|1P|A|1Q|B|C]|$9|1R|A|1S|B|C]]|D|@]|E|$]]|$1|S|3|T|5|J|7|1T|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|1U|8|@]|D|@]|E|$]]|$1|W|3|X|5|J|7|1V|8|@]|D|@]|E|$K|L]]|$1|Y|3|Z|5|6|7|1W|8|@]|D|@]|E|$]]|$1|10|3|11|5|J|7|1X|8|@]|D|@]|E|$K|L]]|$1|12|3|13|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|14|3|15|5|6|7|1Z|8|@]|D|@]|E|$]]|$1|16|3|17|5|J|7|20|8|@]|D|@]|E|$K|L]]|$1|18|3|19|5|J|7|21|8|@]|D|@]|E|$K|L]]|$1|1A|3|1B|5|J|7|22|8|@]|D|@]|E|$K|L]]|$1|1C|3|15|5|6|7|23|8|@]|D|@]|E|$]]|$1|1D|3|-4|5|6|7|24|8|@]|D|@]|E|$]]]|1E|$]]

<p><code>Element.innerHTML</code> is pretty much the way to go. Here are a few ways to use it:</p>

<h3>HTML</h3>

<pre class="lang-html prettyprint-override"><code>&lt;div class="results"&gt;&lt;/div&gt;
</code></pre>

<h3>JavaScript</h3>

<pre class="lang-js prettyprint-override"><code>// 'Modern' browsers (IE8+, use CSS-style selectors)
document.querySelector('.results').innerHTML = 'Hello World!';

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

<p>If you just want to update a portion of a <code>&lt;div&gt;</code> I usually just add an empty element with a class like <code>value</code> or one I want to replace the contents of to the main <code>&lt;div&gt;</code>. e.g.</p>

<pre class="lang-html prettyprint-override"><code>&lt;div class="content"&gt;Hello &lt;span class='value'&gt;&lt;/span&gt;&lt;/div&gt;
</code></pre>

<p>Then I'd use some code like this:</p>

<pre class="lang-js prettyprint-override"><code>// 'Modern' browsers (IE8+, use CSS-style selectors)
document.querySelector('.content .value').innerHTML = 'World!';

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

<p>Then the HTML/DOM would now contain:</p>

<pre class="lang-html prettyprint-override"><code>&lt;div class="content"&gt;Hello &lt;span class='value'&gt;World!&lt;/span&gt;&lt;/div&gt;
</code></pre>

<h3>Full example. Click run snippet to try it out.</h3>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// 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());
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src="https://code.jquery.com/jquery-1.11.3.js"&gt;&lt;/script&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width"&gt;
  &lt;title&gt;Setting HTML content example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;!-- This &lt;input&gt; field is where I'm getting the name from --&gt;
  &lt;label&gt;Enter your name: &lt;input class="name" type="text" value="World"/&gt;&lt;/label&gt;
  
  &lt;!-- Plain Javascript Example --&gt;
  &lt;h1&gt;Plain Javascript Example&lt;/h1&gt;Hello &lt;span class="jsValue"&gt;World&lt;/span&gt;
  
  &lt;!-- jQuery Example --&gt;
  &lt;h1&gt;jQuery Example&lt;/h1&gt;Hello &lt;span class="jqValue"&gt;World&lt;/span&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|625978|text|在页面中添加一个元素(比如div)并写入该div。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|625979|HTML：|625980|<html>
++++<header>
++++++++<title>Page+Title</title>
++++</header>

++++<body>
++++++++<div+id="myDiv"></div>
++++</body>
</html>|code-block|syntax|javascript|625981|jQuery：|625982|$('#myDiv').text('hello+world!');|625983|javascript：|625984|document.getElementById('myDiv').innerHTML+=+'hello+world!';|625985|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Add an element to your page (such as a div) and write to that div.</p>

<p>HTML: </p>

<pre><code>&lt;html&gt;
    &lt;header&gt;
        &lt;title&gt;Page Title&lt;/title&gt;
    &lt;/header&gt;

    &lt;body&gt;
        &lt;div id="myDiv"&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>jQuery:</p>

<pre><code>$('#myDiv').text('hello world!');
</code></pre>

<p>javascript:</p>

<pre><code>document.getElementById('myDiv').innerHTML = 'hello world!';
</code></pre>


blocks|key|410906|text|innerHTML很好，而且仍然有效。在大大小小的项目中都要使用它。我刚在IDE中打开了一个选项卡，那里就有一个。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|410907|+document.getElementById("data-progress").innerHTML+=+"<img+src='../images/loading.gif'/>";|code-block|syntax|javascript|410908|自2005年以来，除了添加了更多的库之外，js+%2B+dom的操作几乎没有什么变化。您可以轻松地设置其他属性，例如|410909|+++uploadElement.style.width+=+"100%25";|410910|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>innerHTML is fine and still valid. Use it all the time on projects big and small. I just flipped to an open tab in my IDE and there was one right there. </p>

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

<p>Not much has changed in js + dom manipulation since 2005, other than the addition of more libraries. You can easily set other properties such as</p>

<pre><code>   uploadElement.style.width = "100%";
</code></pre>


blocks|key|410968|text|如果希望避免使用innerHTML，可以使用DOM方法构造元素并将它们附加到页面。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|410969|​var+element+=+document.createElement('div');
var+text+=+document.createTextNode('This+is+some+text');
element.appendChild(text);
document.body.appendChild(element);​​​​​​|code-block|syntax|javascript|410970|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you want to avoid innerHTML you can use the DOM methods to construct elements and append them to the page.</p>

<pre><code>​var element = document.createElement('div');
var text = document.createTextNode('This is some text');
element.appendChild(text);
document.body.appendChild(element);​​​​​​
</code></pre>


blocks|key|626105|text|这里有一个简单的例子：<div+id="test">content</div>和|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|626106|var+test+=+5;
document.getElementById('test').innerHTML+=+test;|code-block|syntax|javascript|626107|你可以在这里测试它：http://jsfiddle.net/SLbKX/|626108|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/SLbKX/^0|B|S|0|0|A|Q|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>hi here is a simple example: <code>&lt;div id="test"&gt;content&lt;/div&gt;</code> and </p>

<pre><code>var test = 5;
document.getElementById('test').innerHTML = test;
</code></pre>

<p>and you can test it here : <a href="http://jsfiddle.net/SLbKX/" rel="nofollow">http://jsfiddle.net/SLbKX/</a></p>


blocks|key|411029|text|有不同的方法可以做到这一点。一种方法是编写一个检索命令的脚本。如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|411030|var+name="kieran";
document.write=(name);|code-block|syntax|javascript|411031|或者我们可以使用默认的JavaScript方式来打印它。|411032|var+name="kieran";
document.getElementById("output").innerHTML=name;

and+the+html+code+would+be:+

<p+id="output"></p>|411033|我希望这能有所帮助:)|411034|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>there are different ways of doing this.
one way would be to write a script retrieving a command.
like so: </p>

<pre><code>var name="kieran";
document.write=(name);
</code></pre>

<p>or we could use the default JavaScript way to print it. </p>

<pre><code>var name="kieran";
document.getElementById("output").innerHTML=name;

and the html code would be: 

&lt;p id="output"&gt;&lt;/p&gt;
</code></pre>

<p>i hope this helped :)</p>


blocks|key|626169|text|与上面类似，但我使用了(这是在CSHTML中)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|626170|JavaScript：|626171|var+value+=+"Hello+World!"<br>
$('.output').html(value);|code-block|syntax|javascript|626172|CSHTML：|626173|<div+class="output"></div>|626174|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Similar to above, but I used (this was in CSHTML):</p>

<p>JavaScript:</p>

<pre><code>var value = "Hello World!"&lt;br&gt;
$('.output').html(value);
</code></pre>

<p>CSHTML:</p>

<pre><code>&lt;div class="output"&gt;&lt;/div&gt;
</code></pre>


<p>I am trying to display some JavaScript variable on my HTML page. </p>

<p>I was first using <code>document.write()</code> but it use to overwrite the current page when the function was called. </p>

<p>After searching around, the general consensus was that <code>document.write()</code> isn't liked very much. What are the other options? </p>

<p>I found a page suggesting using <code>.innerHTML</code> but that was written in 2005. </p>

<p>A jsFiddle illustrating my problem <a href="http://jsfiddle.net/xHk5g/" rel="noreferrer">http://jsfiddle.net/xHk5g/</a></p>


How to display JavaScript variables in a HTML page without document.write

jQuery

我正试图在我的超文本标记语言页面上显示一些JavaScript变量。我最初使用的是document.write()，但它用于在调用函数时覆盖当前页面。在四处搜索之后，普遍的共识是document.write()不是很受欢迎。还有其他选择吗？我发现一个页面建议使用.innerHTML，但那是在2005年写的。说明我的问题...

问如何在没有document.write的超文本标记语言页面中显示JavaScript变量
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在没有document.write的超文本标记语言页面中显示JavaScript变量EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在没有document.write的超文本标记语言页面中显示JavaScript变量
EN