如何樣式化從本地JSON文件獲取的數據？

-4

如何樣式化從JSON文件中獲取的數據並使用JavaScript動態生成？例如，當我把一個2個文本，我想他們的風格不同如何樣式化從本地JSON文件獲取的數據？

"<p class='nameMovie'>" 
       + data[ i ].name + " " + data[ i ].year + " " + data[ i ].gender + " " + data[ i ].runtime + 
"</p>"

在此代碼，我的文字像這樣：

Godzilla 2014 Fantasy|Action|Sci-fi 2h 3min

我怎樣才能年度，性別和運行時是哥斯拉下

像這樣的事情

Godzilla 2014 
Fantasy|Action|Sci-fi 2h 3min

來源

2016-09-25 Bokchee 88

就像你手動編寫HTML一樣。 – Quentin

不要將數據連接成HTML。您必須轉義該數據才能在HTML中使用......更好的是，設置元素的文本，以免發生HTML解析。 – Brad

那麼如何針對p中的特定文本呢？ –

的唯一途徑以不同方式對文本的不同部分進行樣式化，將它們全部包裝在它們自己的元素中，並給它們分開的類名稱。

例如

<p class="movie"> 
    <span class="movieName">Godzilla</span> <span class="movieYear">2014</span> 
    <span class="movieGenre">Fantasy|Action|Sci-fi</span> 
    <span class="movieRunningTime">2h 3min</span> 
</p>

然後，您可以嘗試用CSS來獲得它想要的。您可能還想嘗試使用<section>替換<p>，或者在名稱&周圍包含<header>元素。

另一方面。我會建議尋找使用模板語言，如鬍鬚（https://github.com/janl/mustache.js/），而不是手動編寫JavaScript中的HTML。當打印到停止怪異錯誤和xss攻擊的屏幕時，這些庫將正確地轉義數據。

來源

2016-09-25 20:00:30 Qazzian

謝謝玩具的人。我試圖做我自己的事情 –

如何樣式化從本地JSON文件獲取的數據？

回答

相關問題