Question

我有一个对象：

message: {
    text: Here is some text
}

我想将它插入这样的span标签：

<span>message.text</span>

这不会打印“这是一些文字”，而是只在网页上显示“message.text”。如何让它显示对象的实际内容？

Answer 1

给出一些id到span

<span id="span"></span>
$("#span").text(message.text);

Answer 2

使用纯JavaScript：

document.getElementsByClassName('text-holder')[0].textContent = message.text;

＆＃13;

var message = {
    text: 'Here is some text'
};
document.getElementsByClassName('text-holder')[0].textContent = message.text;

＆＃13;

<span class="text-holder"></span>

＆＃13;

使用jQuery：

＆＃13;

var message = {
  text: 'Here is some text'
};

$('.text-holder').text(message.text);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="text-holder"></span>

＆＃13;

使用AngularJS：

＆＃13;

var app = angular.module('myApp', []);

app.controller('myController', function($scope) {
  $scope.message = {
    text: 'Here is some text'
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myController">
    <span>{{message.text}}</span>
  </div>
</div>

＆＃13;

Answer 3

一个简单的解决方案，使用vanilla js（严格来说，因为你没有在你的问题中使用jquery标签）和工作片段：

function doAction() {
  var messageObj = {
    text: "Here is some text"
  }

  document.getElementsByTagName('span')[0].innerText = messageObj.text;
}

<span>PLACEHOLDER</span>
<button onclick="doAction()">do</button>

Answer 4

您可以使用标记名称来完成。

document.getElementsByTagName('span').textContent(message.text);

OR可以为span

分配一些类或id

<span id="my_id"></span>

document.getElementById('my_id').textContent(message.text);


<span class="my_id"></span>

document.getElementsByClassName('my_id')[0].textContent(message.text);

使用jQuery，你可以这样做

$(".my_id").text(message.text)

OR

$("#my_id").text(message.text)

Answer 5

如果您使用纯HTML和vanilla JavaScript，那么除了message.text之外的其他内容还应该出现在span标记内。

使用纯JavaScript可以执行以下操作：

var message = {
    text: "Here is some text"
};
var spans = document.getElementsByTagName('span');
var el = spans[0];
el.innerText = message.text;

这是一个JSFiddle：

https://jsfiddle.net/k1q9jo5n/

将对象的值插入范围标记

5 个答案: