如何将 JavaScript 的值转化为 HTML 跨度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6473172/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get value of JavaScript into HTML span?
提问by Mr Morgan
If I have a much simplified JavaScript method such as this:
如果我有一个非常简单的 JavaScript 方法，例如：
function myfunction() {
var i = 9;
}
Is there any way I can get the value of iinto HTML such that when the web page with this method is called, the value 9is displayed in a div or span element?
有什么方法可以将 的值i转换为 HTML，以便在调用具有此方法的网页时，该值9显示在 div 或 span 元素中？
采纳答案by mario.tco
Hi :D you can try the following using JQuery:
嗨 :D 您可以使用 JQuery 尝试以下操作：
var i = 9;
$('#spanId').text(i);
or the classic old-fashion way:
或经典的老式方式：
var tmp= document.getElementById('spanId');
tmp.textContent = id;
I hope this helps.
我希望这有帮助。
回答by SLaks
You can write document.getElementById("some ID").innerHTML = i
你可以写 document.getElementById("some ID").innerHTML = i
回答by Srikanth Venkatesh
You can use innerHTML to embed the i value in a div or span element.
您可以使用 innerHTML 将 i 值嵌入到 div 或 span 元素中。
回答by Andrew Moore
Yes, you can assign an idto your <div>or <span>and set its innerText/textContentproperty to your value.
是的，您可以id为您的<div>or分配 an<span>并将其innerText/textContent属性设置为您的值。
window.onload = function() {
var content = myfunction();
var tag = document.getElementById('displayVar');
if(typeof tag.innerText == "undefined") {
tag.textContent = content;
} else {
tag.innerText = content;
}
}
Do not use innerHTMLif you do not want the HTML code of your value to be parsed (or if you don't expect any HTML value).
不要使用innerHTML，如果你不希望你的价值的HTML代码解析做（如果你不希望任何HTML值）。
And no, you do not need a 31kb library to do that kind of work(just in case there's a bunch of "jQuery can do that!"answers).
不，你不需要一个 31kb 的库来做那种工作（以防万一有一堆“jQuery 可以做到！”的答案）。
Note that you must also modify myfunction()so that it returns the current value. A simple return i;statement in the function will do the trick.
请注意，您还必须进行修改myfunction()以使其返回当前值。return i;函数中的一个简单语句就可以解决问题。
回答by George Cummins
myfunction() current does not return its value. However, if you want to get the value when the page is "called" (loaded) you can do this:
myfunction() current 不返回其值。但是，如果您想在页面被“调用”（加载）时获取该值，您可以这样做：
function myfunction() {
var i = 9;
return i;
}
And in the markup:
在标记中：
<body onload="document.getElementById('id_of_your_div').innerHTML = myfunction()">
Please note that innerHTML has cross-browser issues, so you may want to use a library function such as jQuery's html() for reliable results.
请注意，innerHTML 存在跨浏览器问题，因此您可能需要使用诸如 jQuery 的 html() 之类的库函数来获得可靠的结果。
回答by 0x499602D2
JavaScript:
JavaScript：
function myFunction() {
var i = 9;
return i;
}
$('myElement').innerHTML = myFunction();
HTML:
HTML：
<span id="myElement"></span>
回答by Bunty
you can also use jQuery to simplify the syntax following are the three ways you can do that using jQuery,
您还可以使用 jQuery 来简化语法，以下是您可以使用 jQuery 实现的三种方法，
1) $('span').text(i)
1) $('span').text(i)
2) $('#someid').text(i) //someid = value of id attribute of span tag.
2) $('#someid').text(i) //someid = span标签的id属性值。
3) $('.someclassname').text(i) //someclassname = class name for the span tag.
3) $('.someclassname').text(i) //someclassname = span 标签的类名。
- Also using jQuery means forcing the users have to download addition jQuery lib when the page loads. That might slow down the page depending on the connection speed of the users. You might want to consider that while selecting between jQuery and plain JavaScript
- 同样使用 jQuery 意味着在页面加载时强制用户必须下载额外的 jQuery 库。这可能会减慢页面速度，具体取决于用户的连接速度。在 jQuery 和纯 JavaScript 之间进行选择时，您可能需要考虑这一点
