渲染陣列數據

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

這可能是這些東西，我會拍自己的臉瞬間就到我這裏來一個

來源

2013-02-06 Cleverbird

你的問題還不夠清楚，有很多方法可以做你想做的。

一個版本會寫的內容上飛

<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-06 19:16:08

啊，看，我知道這將是一個相對簡單的事情！謝謝！ – Cleverbird

也許愚蠢的問題......但我如何將CSS效果應用到這些元素？我試圖給blogElement添加一些簡單的效果，但似乎瀏覽器會忽略這些效果。還嘗試向容器DIV添加效果，但同樣，瀏覽器似乎忽略了這些效果。 – Cleverbird

你是什麼意思，你的意思是CSS樣式或動畫效果？ –

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

來源

2013-02-06 19:05:41 Ryan

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-06 19:07:47 pwnyexpress

渲染陣列數據

回答

相關問題