logo标签列表

如何将JavaScript的值传递到HTML的span元素中？

javascripthtml
3
如果我有一个非常简化的JavaScript方法，例如以下内容：
function myfunction() {
     var i = 9;
}

有没有办法将i的值以HTML的形式呈现出来，使得当页面调用此方法时，9的值会在一个div或span元素中显示出来？

7个回答
5
你可以写 document.getElementById("some ID").innerHTML = i。
1

是的，您可以为您的<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;
  }
}

如果您不希望解析值的HTML代码（或者您不期望任何HTML值），请勿使用innerHTML。

而且，您不需要一个31kb的库来完成这种工作（以防有一堆“jQuery可以做到！”的答案）。

请注意，您还必须修改myfunction()，使其返回当前值。函数中简单的return i;语句就可以解决问题。

请注意innerText是一项专有功能，在除了最简单的情况之外，其行为相当奇怪；而textContent则被广泛实现。 - Ms2ger
1

myfunction() 目前不会返回其值。但是，如果您想在页面“调用”（加载）时获取该值，可以这样做：

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

在标记中：

<body onload="document.getElementById('id_of_your_div').innerHTML = myfunction()">

请注意，innerHTML存在跨浏览器问题，因此您可能希望使用库函数，例如jQuery的html()以获得可靠的结果。
@George Commins: 这是因为FF使用了W3C标准.textContent属性。我的答案反映了这一点。 - Andrew Moore
@Andrew Moore：这只是加强了建立一个库的论点。为每个可用的浏览器编写条件代码是浪费（优秀）开发人员的时间。 - George Cummins
@George Cummins：我们正在讨论在innerText或textContent之间的单个if语句。在允许注入之间（没有关于OP函数返回的数据类型的信息...它是“大大简化”的），你可以为一个简单的if语句做额外的工作。这就是原生JS的本质。 - Andrew Moore
如果这是库中唯一需要的特性，开销确实可能太高了。但是如果开发人员发现自己经常编写相同的代码，使用库将会非常有价值。此外，断言“我们只是在谈论一个单独的if语句”可能是正确的，但在新浏览器发布或项目要求改变（“为IE 4添加支持！”）时可能不再正确。 - George Cummins
@George Cummins：作为一个狂热的 MooTools 用户，我同意你的观点。然而，在这个特定的用例中，使用库会过度设计。 - Andrew Moore
显示剩余4条评论
1

嗨:D，您可以尝试使用JQuery来实现以下内容：

var i = 9;
$('#spanId').text(i);

或者使用经典的老式方式：

var tmp= document.getElementById('spanId');
tmp.textContent = id;

希望这能有所帮助。

1
-1：强制用户下载一个31kb的库来完成这样一个基本任务是荒谬的。对于仍在使用拨号上网的人来说，这代表着5-10秒的下载时间。此外，应该使用innerText/textContent而不是innerHTML。 - Andrew Moore
谢谢你指出来，安德鲁。我已经编辑了我的回答。是的，虽然为了这样一个基本的任务下载一个库是荒谬的，但我只是展示另一种方法 :)。 - mario.tco
1
你可以使用innerHTML将i的值嵌入到div或span元素中。
0

JavaScript：

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

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

HTML：

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

你也可以使用jQuery来简化语法，以下是三种使用jQuery的方法：

1) $('span').text(i)

2) $('#someid').text(i) // someid = span标签的id属性值

3) $('.someclassname').text(i) // someclassname = span标签的类名

  • 同时使用jQuery意味着用户在页面加载时必须下载额外的jQuery库。这可能会根据用户的连接速度而导致页面变慢。在选择jQuery和纯JavaScript之间时，您需要考虑到这一点。
1
-1：强制用户下载一个31kb的库来完成如此基本的任务是荒谬的。而且，在使用jQuery之前，你应该学习原生JavaScript的工作原理。既然你建议使用jQuery，那么最好按照正确的方式来做，使用.text()。 - Andrew Moore
谢谢Andrew指出这一点。我同意为这样的任务下载库是荒谬的。显然，我错过了一个非常重要的点。 - Bunty
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接