Question

我的html文件中有一个类名为今天的div元素，我正在尝试打印温度，因为我已经写了以下代码但是这个没有在div元素上打印任何东西，请帮助。

    $http.get("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22islamabad%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys")
    .success(function (response) {
        var result = response.query; 
        var temp=result.results.channel.item.condition.temp;
        var text=result.results.channel.item.condition.text;    
        var weather = $scope.weather = temp+" "+text;
        document.getElementsByClassName("today").innerHTML = weather;
    });

Answer 1

getElementsByClassName没有innerHTML的定义，因为getElementsByClassName返回NodeList对象而不是元素。 NodeList本质上是元素的集合。

如果需要返回单个元素，请使用getElementById并传递元素的id。或者甚至更好，因为您已经在使用jQuery，您可以执行以下操作...

$('.today').html(weather);

Answer 2

document.getElementsByClassName("today")将获得HTMLElement Collection。因此，最好将代码更改为：

document.getElementsByClassName("today")[0].innerHTML = weather;

您的最终代码应为：

$http.get("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22islamabad%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys")
.success(function (response) {
    var result = response.query; 
    var temp=result.results.channel.item.condition.temp;
    var text=result.results.channel.item.condition.text;    
    var weather = $scope.weather = temp+" "+text;
    $(".today").html(weather); // As you are using jQuery.
});

或者只是：

$http.get("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22islamabad%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys")
.success(function (response) {
    var result = response.query; 
    var temp=result.results.channel.item.condition.temp;
    var text=result.results.channel.item.condition.text;    
    var weather = $scope.weather = temp+" "+text;
    document.getElementsByClassName("today")[0].innerHTML = weather;
});

但请记住，这会更新第一个元素。如果您的.today是第二或第三，这可能不起作用，您可能需要调整索引。

Answer 3

尝试在视图中将“ng-bind”指令添加到div中。例如：

<div ng-bind="weather" class="today"></div>

Answer 4

由于您正在调用document.getElementByClassName（“today”），它将返回具有指定类的元素集合，因此您需要指定集合索引，如下所示： -

document.getElementsByClassName（“today”）[0] .innerHTML = weather;

Answer 5

你使用javascript代码中看到的角度js，然后使用angular js功能为元素赋值，

试试这个，

将html更改为

<div class='today'>{{myVariable}}</div>

并将javascript更改为

$http.get("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22islamabad%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys")
    .success(function (response) {
        var result = response.query; 
        var temp=result.results.channel.item.condition.temp;
        var text=result.results.channel.item.condition.text;    
        var weather = $scope.weather = temp+" "+text;
        $scope.myVariable = weather;
    });

（未经测试，希望它有效）

Answer 6

由于你想将html绑定到元素，你不应该从角度控制器进行DOM操作。你可以使用角度绑定（从控制器做dom操作被认为是不好的做法）。

您可以在元素上使用ng-bind-html指令，该指令将html作为文本添加到所需元素。另外，您需要使用$sce服务trustAsHtml方法将该HTML设为受信任。

<强>代码

$scope.myVariable = $sce.trustAsHtml(weather);

<强>标记

<div class="today" ng-bind-html="weather"></div>

或者您也可以制作可重复使用的过滤器，将html视为可信的html，如下所示。

<强>标记

<div class="today" ng-bind-html="weather | trustedhtml"></div>

过滤

app.filter('trustedhtml', function($sce){ return function(input){ return $sce.trustAsHtml(input); } })

document.getElementsByClassName（＆＃34;＆＃34;）。innerHTML - not working

6 个答案: