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>

これはおそらく、私が思いついた瞬間に顔を平手打ちすることの1つです

4

3 に答える 3

1

あなたの質問は十分に明確ではありません。あなたが望むことをする方法はたくさんあります。

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 に答える