Home/ Questions/Q 9255215
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T11:39:56+00:00

This is probably very easy to do, but its been quite some time since

  • 0

This is probably very easy to do, but its been quite some time since I last used JavaScript, and I cant for the life of me remember how to do this (yes, I searched first, but found nothing that could help me).

Essentially I want to render this as a HTML blog post using a function:

<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>

This is probably one of those things where I’ll slap myself in the face the moment it comes to me

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your question is not clear enough, there are many ways to do what you want.

    One version would write the content on the fly

    <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>

    Another version would fill a HTML element

    <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>

    You could also create a version which fills an element per field in the blog object.
    JQuery will give you many additional options to realise what you want.

    Beware: These examples are vulnerable to HTML injection. Please read up on this if you don’t know what this means.

    • 0