document.getElementsByClassName("").innerHTML - 不工作[重复]答案

【问题标题】：document.getElementsByClassName("").innerHTML - not working [duplicate]document.getElementsByClassName("").innerHTML - 不工作[重复]
【发布时间】：2015-12-25 03:43:24
【问题描述】：

我的 html 文件中有一个类名为 today 的 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;
    });

【问题讨论】：

标签： jquery html angularjs

【解决方案1】：

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

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

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

【讨论】：

只是添加，解决方法是访问nodeList中的第一个元素：document.getElementsByClassName("today")[0].innerHTML = weather;
也可以……但我从不相信这种方法……
@Leo 这将违反角度标准..控制器不应该使用 DOM docs.angularjs.org/guide/controller
@PankajParkar 绝对正确。但由于问题本身与 AngularJS 没有直接关系，所以我仅限于具体问题的答案。该代码 sn-p 中可能有很多错误（从架构的角度来看），例如从控制器发出 http 请求最好转移到可注入服务

【解决方案2】：

document.getElementsByClassName("today") 将获得一个 HTMLElement 集合。所以最好把你的代码改成：

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 是第二或第三，这可能不起作用，您可能需要调整索引。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

document.getElementsByClassName("today")[0].innerHTML = 天气；

【讨论】：

【解决方案5】：

您在 javascript 代码中使用了 angular 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;
    });

（未测试，希望有效）

【讨论】：

【解决方案6】：

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

您可以在元素上使用ng-bind-html 指令，它将html 作为文本添加到所需元素。此外，您需要使用 $sce service 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);
   }
})

【讨论】：