在 html 中打印 javascript 数组答案

【问题标题】：print javascript array in html在 html 中打印 javascript 数组
【发布时间】：2015-08-05 10:26:24
【问题描述】：

不确定如何将结果打印到 HTML。我可以通过警报来做到这一点。如何在浏览器上打印？

<!DOCTYPE html>
<html>
<body>
    <script>
        var parsed = "";
        var myObject = [{
            firstname: "Jane",
            lastname: "Doe",
            email: "jdoe@email.com"
        }, {
            firstname: "Ja",
            lastname: "joe",
            email: "je@email.com"
        }, {
            firstname: "Janet",
            lastname: "joes",
            email: "jsse@email.com"
        }];

        for (i = 0; i < myObject.length; i++) {
            var myobj = myObject[i];
            for (var property in myobj) {
                parsed += property + ": " + myobj[property] + "\n";
                alert(property);
                alert(myobj[property]);
            }
        }            
        alert(parsed);
    </script>
</body>
</html>

不确定如何将结果打印到 HTML。我可以通过警报来做到这一点。如何在浏览器上打印？

【问题讨论】：

使用任何 DOM 元素的 innerHTML 属性或使用 document.write。
使用 document.write 放入一行。我希望所有字段都在单独的行中

标签： javascript jquery arrays

【解决方案1】：

<!DOCTYPE html>
    <html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>     
        </head>
        <body>
            <textarea id="display" style="width:1000px;height:1000px"></textarea>
            <script>
                var parsed = "";
                var myObject = [{
                    firstname: "Jane",
                    lastname: "Doe",
                    email: "jdoe@email.com"
                }, {
                    firstname: "Ja",
                    lastname: "joe",
                    email: "je@email.com"
                }, {
                    firstname: "Janet",
                    lastname: "joes",
                    email: "jsse@email.com"
                }];
                for (i = 0; i< myObject.length; i++) {
                    var myobj=  myObject[i];
                    for (var property in myobj) {
                        parsed += property + ": " + myobj[property] + "\n";          
                    }
                }                           
                $("#display").val(parsed);            
            </script>
        </body>
    </html>

【讨论】：

这仍然在一行中显示结果作为document.write语句
现在检查一下，如果你想让文本区域看起来像 Div，你可以相应地编辑它的 CSS

【解决方案2】：

在您的 HTML 页面中创建一个包含输出的元素，并为其分配一个适当的唯一 ID，例如“target-id”。

<html>
    <body>
         ...
         <div id="target-id"></div>
         ...
    </body>
</html>

然后使用下面的方法将想要的文本/HTML插入到该元素中。

document.getElementById('target-id').innerHTML = 'html data';

另请参阅：Inserting HTML into a div

【讨论】：

【解决方案3】：

创建一个元素，例如具有特定属性的 html 正文中的 div 或标签，例如 class、id、name

HTML

<label id="arrayMessage"> </label>

Javascript

document.getElementById('arrayMessage').innerHTML = parsed ;

jQuery

$("#arrayMessage").html(parsed);

您可以使用元素的其他属性按类、名称或 html 标记类型获取它们。

【讨论】：

【解决方案4】：

你可以使用简单的：

document.write([1,2,3]);

但这不会太漂亮，而且会覆盖现有的页面内容。

你可以这样做：

...
<body>
  <div id="data"></div>
</body>

<script>
  var data = document.getElementById('data');
  myObject.forEach(function(element) {
     var firstname = document.create('div');
     var lastname = document.create('div');
     var email = document.create('div');

     firstname.innerHTML = element.firstname;
     lastname.innerHTML = element.lastname;
     email.innerHTML = element.email;

     data.appendChild(firstname);
     data.appendChild(lastname);
     data.appendChild(email);
  });
</script>
...

【讨论】：

【解决方案5】：

最简单的解决方案是使用带有缩进选项的 JSON.stringify() 并使用标签。 JSON.stringify(JSON,null,4) 4 空格缩进。

let pre = document.getElementById('output');
let jstring = JSON.stringify({ a: 1, b:2,c:3 }, null, 4);

pre.textContent = jstring;

pre{
border:1px solid grey;
min-height:10em;

&lt;pre id="output"&gt;&lt;/pre&gt;

【讨论】：

【解决方案6】：

这是一个简单的解决方案，我们使用 JSON.stringify() 将对象数组转换为字符串。希望它是你想做的。

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Document</title>
</head>
<body>

    <p id="elements"> </p>
    <script>

        var myObject = [{
            firstname: "Jane",
            lastname: "Doe",
            email: "jdoe@email.com"`enter code here`
        }, {
            firstname: "Ja",
            lastname: "joe",
            email: "je@email.com"
        }, {
            firstname: "Janet",
            lastname: "joes",
            email: "jsse@email.com"
        }];
        myObject.forEach(element => {
   document.getElementById("elements").innerHTML= JSON.stringify(myObject); 
});


        </script>
</body>
</html>

【讨论】：