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

Question

当我访问Codecademy或JSBin之类的网站时，我注意到它们允许您查看控制台输出。这是如何工作的呢？

为了清楚起见，假设用户在文本框中键入以下内容

console.log('hello');

我怎样才能在实际的网页上而不是浏览器的控制台上输出呢？

Answer 1

正如Shahar提到的，在实际web页面上查看输出的方法是将其添加到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/>");
}

只要调用outputToPage()函数，上面的示例就会将string和换行符输出到输出div。请注意，要使jQuery的.append()方法正常工作，您需要加载jQuery。