如何在瀏覽器窗口中顯示此javascript代碼段的結果？

Question

我很好理解console.log中發生的事情，但是我想在瀏覽器窗口中顯示代碼。 我認為我應該使用document.write，但是對此我不確定。

var friends = {
bill: {
    firstName: "Bill",
    lastName: "Gates",
},
steve: {
    firstName: "Steve",
    lastName: "Gates",
}
};

var list = function(friends){
for (var key in friends){
    console.log(key);
}
};

var search = function(name){
for (var key in friends){
     if (friends[key].firstName === name){
    console.log(friends[key]);
    return friends[key];
    }   
}
};

Answer 1

您可以使用alert功能

alert("Hello World")

或者你可以使用

document.write("Hello World")

它將字符串“ Hello World”輸出到html中js代碼段的位置。 另外，您可以操縱DOM並在div或span標簽上設置innerHTML 。 如果您像這樣向HTML添加帶有ID的標簽，

<span id="foo"></span>

您可以使用

document.getElementById("foo").innerHTML = "Hello World"

當然，如果您的問題是要序列化函數的結果，請使用JSON.Stringify

alert(JSON.stringify({"hello": "world", 3: "bar"}));

Answer 2

為了顯示您的哈希，您可以使用document.write，但是您需要像這樣“字符串化”您的數據：

document.write(JSON.Stringify(friends));`

如果您想要更美麗的東西：

document.write(JSON.stringify(friends, null, "<br/>"))

文檔： https : //developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

Answer 3

另一種可能性是使用jQuery的.html（）修改頁面上的現有HTML元素。

var showFriends=function(){
var x = JSON.stringify(friends,null,'</br>');
$('#myDiv').html('<p>'+x+'</p>');
};

jsfiddle： http : //jsfiddle.net/wLZff/