document.getElementsByClassName（「」）的innerHTML - 不工作

我有類名稱的div元素今天在我的HTML文件，我想它的打印溫度，我已經writen下面的代碼但是這不是在div元素上打印任何東西，請給予幫助。document.getElementsByClassName（「」）的innerHTML - 不工作

$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; 
    });

來源

2015-12-24 Ali Salman

getElementsByClassName具有用於innerHTML因爲getElementsByClassName返回一個NodeList對象不是元素沒有定義。 A NodeList本質上是一組元素。

如果您需要返回一個元素，然後使用getElementById並傳遞元素的ID。甚至更好，因爲你已經在使用jQuery，您可以執行下列操作...

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

來源

2015-12-24 18:12:26 Leo

只需添加，修復是訪問第一元件在節點列表：'document.getElementsByClassName（「今天」）[0 ] .innerHTML = weather;' –

這樣做也會......但我永遠不會相信這種方法...... – Leo

@Leo這將違反角度標準..控制器不應該玩DOM https：// docs。 angularjs.org/guide/controller –

的document.getElementsByClassName("today")會得到一個HTML元素集合。所以，最好是你的代碼更改爲：

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

來源

2015-12-24 18:15:00

嘗試在您的視圖中添加「ng-bind」指令到您的div。

document.getElementsByClassName - ：例：

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

來源

2015-12-24 18:16:56 Tom

由於您呼叫document.getElementByClassName（「今天」），所以你需要如下指定集合的指數則返回你指定的類元素集合（「今日」）[0] .innerHTML = weather;

來源

2015-12-24 18:17:50 Personify

您使用角JS作爲在JavaScript代碼所示，然後使用角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; 
    });

（未經測試，希望它有效）

來源

2015-12-24 18:27:30

正如你想要綁定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); 
    } 
})

來源

2015-12-24 19:43:24

document.getElementsByClassName（「」）的innerHTML - 不工作

回答

相關問題