简体   繁体   English

如何使JavaScript的价值进入HTML范围?

[英]How to get value of JavaScript into HTML span?

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 i into HTML such that when the web page with this method is called, the value 9 is displayed in a div or span element? 有什么方法可以将i的值转换为HTML,以便在调用此方法的网页时,将值9显示在div或span元素中?

您可以编写document.getElementById("some ID").innerHTML = i

您可以使用innerHTML将i值嵌入div或span元素中。

Yes, you can assign an id to your <div> or <span> and set its innerText / textContent property to your value. 是的,您可以为<div><span>分配一个id ,并将其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 innerHTML if you do not want the HTML code of your value to be parsed (or if you don't expect any HTML value). 如果您不希望解析值的HTML代码(或者不希望有任何HTML值),请不要使用innerHTML

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. 请注意,还必须修改myfunction()以便它返回当前值。 A simple return i; 一个简单的return i; statement in the function will do the trick. 函数中的语句将解决问题。

myfunction() current does not return its value. myfunction()当前不返回其值。 However, if you want to get the value when the page is "called" (loaded) you can do this: 但是,如果要在页面“被调用”(加载)时获取值,可以执行以下操作:

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()之类的库函数来获得可靠的结果。

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. 我希望这有帮助。

JavaScript: JavaScript的:

function myFunction() {
    var i = 9;
    return i;
}

$('myElement').innerHTML = myFunction();

HTML: HTML:

<span id="myElement"></span>

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. 同样使用jQuery意味着迫使用户必须在页面加载时下载其他jQuery lib。 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和普通JavaScript之间进行选择时,您可能需要考虑这一点

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM