web-dev-qa-db-fra.com

Comment puis-je rendre le code HTML dans un div en utilisant Javascript ou jQuery

J'essaie de rendre du code HTML à la volée sur mon site Web sans succès. J'ai essayé d'utiliser la fonction .html () de jQuery comme ci-dessous:

Mon html  

<div id='open_ender_output'></div>

Mon JQuery 

var openEnderContent = "&lt;p&gt;&lt;span style="color: #ff0000;"&gt;DDD&lt;/span&gt;!!!!!&lt;strong&gt;666666666666&lt;/strong&gt;&lt;/p&gt;"
//openEnderContent comes from my backend
$('#open_ender_output').html(openEnderContent)

Le résultat est 

<p><span style="color: #ff0000;">DDD</span>!!!!!<strong>666666666666</strong></p>

Existe-t-il un moyen de rendre ce résultat à la volée pour que le navigateur reflète les styles spécifiques définis dans le texte?

javascriptjqueryhtml
4
Andres

Décodez le contenu en créant un élément temporaire.

var openEnderContent = '&lt;p&gt;&lt;span style="color: #ff0000;"&gt;DDD&lt;/span&gt;!!!!!&lt;strong&gt;666666666666&lt;/strong&gt;&lt;/p&gt;';

$('#open_ender_output').html(
  // create an element where the html content as the string
  $('<div/>', {
    html: openEnderContent
  // get text content from element for decoded text  
  }).text()
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='open_ender_output'></div>

Ou vous devez utiliser une chaîne contenant des symboles non échappés.

var openEnderContent = '<p><span style="color: #ff0000;">DDD</span>!!!!!<strong>666666666666</strong></p>';

$('#open_ender_output').append(openEnderContent);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='open_ender_output'></div>

5
Pranav C Balan

Changez votre jQuery en

var openEnderContent = '<p><span style="color: #ff0000;">DDD</span>!!!!!<strong>666666666666</strong></p>';

$('#open_ender_output').append(openEnderContent);
1
elementzero23

Vous êtes sur la bonne voie. Vous devez différencier les guillemets simples et doubles lors de la création d'une chaîne. Vous fermez votre chaîne en ajoutant des guillemets entre guillemets.

Utilisez la var ci-dessous.

var openEnderContent = "<span style='color: #ff0000;'>DDD</span>!!!!!<strong>666666666666</strong></p>";
$('#open_ender_output').html(openEnderContent);

Violon par exemple: https://jsfiddle.net/acr2xg6u/

1
Gezzasa

Problème d'analyse de ce que je peux dire.

"&lt;p&gt;&lt;span style="color: #ff0000;"&gt;DDD&lt;/span&gt;!!!!!&lt;strong&gt;666666666666&lt;/strong&gt;&lt;/p&gt;"

Vous ne pouvez pas créer de chaînes comme ça. Si vous êtes à l'intérieur de l'un, vous devez utiliser l'autre:

"My name is 'Josh Crowe'"
'My name is "Josh Crowe"'

Voici le code corrigé:

"&lt;p&gt;&lt;span style='color: #ff0000;'&gt;DDD&lt;/span&gt;!!!!!&lt;strong&gt;666666666666&lt;/strong&gt;&lt;/p&gt;"
0
Crowes