使用JSON我想換行顯示到我的HTML

我創建的顯示的Json串到我的HTML功能，所有我想要做的是具有新行（使用<br>換行符）使用JSON我想換行顯示到我的HTML

Thnaks :)

的json：

"copyright":"© Copyrights 2017 <br> All Rights Reserved"

什麼實際顯示：

© Copyrights 2017 <br> All Rights Reserved

瓦在我想看看：

© Copyrights 2017 
All Rights Reserved

更多我碼的細節：

的index.php

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>title</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"> 
     <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css"> 
     <link rel="stylesheet" type="text/css" href="css/main.css"> 
     <link rel="stylesheet" type="text/css" href="css/contactForm.css"> 
     <link rel="stylesheet" type="text/css" href="css/socialMedia.css"> 
     <script src="script/contactForm.js"></script> 
     <script src="script/main.js"></script> 
     <script src="script/translate.js"></script> 
     <script src="script/navigationMapper.js"></script> 
    </head> 
    <body ng-app="myApp" id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60"> 

     <nav class="navbar navbar-default navbar-fixed-top"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span>       
        </button> 
        <a class="navbar-brand" href="#myPage"><img id="logo" src="img/logo.png" alt="Cysca-Sysacom Electrical and Electronic Engineering Services" width="107" height="30"></a> 
       </div> 
       <div class="collapse navbar-collapse" id="myNavbar"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li><a data-target="#" href="#/" data-translate="menu.home"></a></li> 
         <li><a data-target="#services" href="#/services" data-translate="menu.services"></a></li> 
         <li><a href="/portfolio" data-translate="menu.portfolio"></a></li> 
         <li><a href="/pricing" data-translate="menu.pricing"></a></li> 
         <li><a href="/contact" data-translate="menu.contact"></a></li> 
         <li style="padding-left:1em; margin-left:1em">&nbsp;</li> 
         <li class="lang"><a>FR</a></li> 
         <li class="lang bold"><a>EN</a></li> 
        </ul> 
       </div> 
      </div> 
     </nav> 

     <!--Navigation pages are loaded in this div--> 
     <div ng-view id ="content" class="container-fluid scrollable"></div> 

     <footer class="container-fluid text-center"> 
      <div class="icons"> 
       <a class="facebook" href="https://www.facebook.com" target="_blank"></a> 
       <a class="linkedin" href="https://www.linkedin.com" target="_blank"></a> 
       <a class="youtube" href="https://www.youtube.com" target="_blank"></a> 
      <div> 
      <p data-translate="copyright"></p> 
     </footer> 

    </body> 
</html>

我的文件translate.js

$(function() { 

    // Object literal behaving as multi-dictionary 
    dictionary = { 
     "fr": { 
     "menu": { 
      "home": "ACCUEIL", 
      "services": "SERVICES", 
      "portfolio": "PORTFOLIO", 
      "pricing": "TARIF", 
      "contact": "CONTACT" 
     }, 
     "copyright":"© Copyrights 2017, Tous droits réservés" 
     }, 
     "en": { 
     "menu": { 
      "home": "HOME", 
      "services": "SERVICES", 
      "portfolio": "PORTFOLIO", 
      "pricing": "PRICING", 
      "contact": "CONTACT" 
     }, 
     "copyright":"© Copyrights 2017 \r\n All Rights Reserved" 
     } 
    }; 

    // Function for swapping dictionaries 
    set_lang = function(dictionary) { 
     $("[data-translate]").text(function() { 
     var key = $(this).data("translate"); 
     return parseSubObject(dictionary, key); 
     }); 
    }; 

    function parseSubObject(obj, str) { 
     var props = str.split("."); 

     var thisProp = props.shift(); 
     if (obj.hasOwnProperty(thisProp)) { 
     if (props.length === 0) { 
      return obj[thisProp]; 
     } else { 
      return parseSubObject(obj[thisProp], props.join('.')); 
     } 
     } else { 
     return null; 
     } 
    } 

    // Swap languages when menu changes 
    $(".lang").click(function() { 
     var language = $(this).text().toLowerCase(); 
     if (dictionary.hasOwnProperty(language)) { 
     set_lang(dictionary[language]); 
     } 
    }); 

    // Set initial language to English 
    set_lang(dictionary.en); 

});

來源

2017-03-08 Mustapha Mechken

能否請您發佈您的代碼？ – Marcelo

如果您使用的是jQuery，您必須使用.append將html添加到dom並將其解釋爲html。如果你正在使用類似angularjs或VueJS的東西，它們的行爲也是相似的。 – victor

這要看語言或庫是用來顯示Json的內容。您正在使用jQuery

讓我們asume，你可以這樣做：

html = 'content of the Json string.<br>Next line'; 
$('#textHolder').html(html);

來源

2017-03-08 15:47:58 ludiccc

或者你可以附加$（'＃textHolder'）。append（html）; – user3284463

使用JSON我想換行顯示到我的HTML

回答

相關問題