如何在网页上显示控制台输出？

Question

当我访问Codecademy或JSBin等网站时，我注意到它们允许您查看控制台输出。这有什么作用？

为了澄清，让我们说用户在文本框中输入

console.log('hello');

如何在实际网页上输出，而不是在浏览器的控制台上输出？

Answer 1

正如Shahar所提到的，在实际网页上查看输出的方法是将其添加到DOM对象中。例如，如果我们为输出创建一个div并使用jQuery将输出添加到其中：

HTML：

<div id="output"><div>

Javascript，使用jQuery：

// your example output
var string = "hello";

// append to end of output div
function outputToPage() {
    $('#output').append(string + "<br/>");
}

每当调用string函数时，上面的示例都会将outputToPage()和换行符输​​出到输出div。请注意，您需要为jQuery的.append()方法加载jQuery才能工作。