0

这可能很容易做到，但是自从我上次使用 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>

这可能是我一来就打自己脸的事情之一

4

3 回答 3

1

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

一个版本可以即时编写内容

<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 注入的影响。如果您不知道这意味着什么，请阅读此内容。

于 2013-02-06T19:16:08.057 回答
0 
myBlogPageElement.innerHTML += myBlogPosting.title + MyBlogPosting.bodyText + MyBlogPosting.link;
于 2013-02-06T19:05:41.027 回答
0 
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);
于 2013-02-06T19:07:47.437 回答