渲染阵列数据

Render array data

本文关键字：数据 阵列      更新时间：2023-09-26

这可能很容易做到，但距离我上次使用JavaScript已经有很长一段时间了，我一辈子都不记得该怎么做了（是的，我先搜索了一下，但没有找到任何帮助）。

本质上，我想使用一个函数将其呈现为HTML博客文章：

<html>
<head>
<style>
body
{
background-color:#ffa500;
}
#blogElement
{
background-color: #fff;
margin-left:auto;
margin-right:auto;
width:70%;
}
</style>
</head>
<body>
<div id="mainContent">
    <div id="blogElement"></div>
</div>
<script>
var myBlogPosting = {  
  title:    "Google launches underwater Street View",
  image:    "1.jpg",
  author:   "Xeni Jardin",
  bodyText: "<p>Today Google Maps unveils a new Street View feature: " +
            "underwater panoramic views of six special sea spots. " +
            "The idea is to create a virtual map of the oceans, " +
            "documenting the state of fragile ecosystems as they " + 
            "change over time, and sharing a vivid experience of " + 
            "part of our world that few humans get to see up close " + 
            "and in person, in real life.</p>" +
            "<p>The ocean collection on Google Street View is now " + 
            "available at maps.google.com/ocean, and includes coral " + 
            "reefs and the creatures who live in them, in Australia, " + 
            "the Philippines and Hawaii.</p>",
  link:     "http://boingboing.net/2012/09/25/google-launches-underwater-str.html",
  ranking:  "3",
}
function CreateBlogHtml(blogpost)
{
   return "<h1>"+blogpost.title+"</h1>"+
        "<img src="+blogpost.image+" />"+
        "<p>Author: "+blogpost.author+"</p>"+
        blogpost.bodyText+
        "<a href='""+blogpost.link+"'">Read more</a>"+
        "<p>Ranking: "+blogpost.ranking+"</p>";
}
document.write(CreateBlogHtml(myBlogPosting));
</script>
</body>
</html>

这可能是我一想到就会扇自己耳光的事情之一

你的问题还不够清楚，有很多方法可以做你想做的事。

一个版本将在飞行中写入内容

<div id="blogElement"></div>
<script>
function CreateBlogHtml(blogpost)
{
   return "<h1>"+blogpost.title+"</h1>"+
          blogpost.bodyText+
          "<a href='""+blogpost.link+"'">Read more</a>";
}
document.write(CreateBlogHtml(myBlogPosting)); 
</script>

另一个版本将填充HTML元素

<div id="blogElement"></div>
<script>
function CreateBlogHtml(blogpost)
{
   return "<h1>"+blogpost.title+"</h1>"+
          blogpost.bodyText+
          "<a href='""+blogpost.link+"'">Read more</a>";
}

function ShowBlogPost(blogpost)
{
    document.getElementById("blogElement").innerHTML=CreateBlogHtml(blogpost))
}

ShowBlogPost(myBlogPosting));
</script>

您还可以创建一个版本，在博客对象的每个字段中填充一个元素。JQuery将为您提供许多额外的选项来实现您想要的东西。

注意：这些示例容易受到HTML注入的攻击。如果你不知道这意味着什么，请仔细阅读。

myBlogPageElement.innerHTML += myBlogPosting.title + MyBlogPosting.bodyText + MyBlogPosting.link;

var myBlogPosting = {  
    title:    "Google launches underwater Street View",
    bodyText: "<p>Today Google Maps unveils a new Street View feature: " +
        "underwater panoramic views of six special sea spots. " +
        "The idea is to create a virtual map of the oceans, " +
        "documenting the state of fragile ecosystems as they " + 
        "change over time, and sharing a vivid experience of " + 
        "part of our world that few humans get to see up close " + 
        "and in person, in real life.</p>" +
        "<p>The ocean collection on Google Street View is now " + 
        "available at maps.google.com/ocean, and includes coral " + 
        "reefs and the creatures who live in them, in Australia, " + 
        "the Philippines and Hawaii.</p>",
    link:     "http://boingboing.net/2012/09/25/google-launches-underwater-str.html"
}
function RenderBlogPost(targetElementID, blogObj) {
    var element = document.getElementById(targetElementID);
    element.innerHTML(blogObj.bodyText);
}
RenderBlogPost("someID", myBlogPosting);
相关文章：