Comment rendre un code html dans un div en utilisant Javascript ou jQuery ?

Question

J'essaie de rendre du HTML à la volée dans 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 = "<p><span style="color: #ff0000;">DDD</span>!!!!!<strong>666666666666</strong></p>"
//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 faire en sorte que le navigateur rende ce résultat à la volée de manière à ce qu'il reflète les styles spécifiques définis pour le texte ?

Answer 1

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

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

$('#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 de caractères qui contient des symboles non encodé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>

Answer 2

Vous êtes sur la bonne voie. Vous devez faire la différence entre les guillemets simples et doubles lorsque vous créez une chaîne de caractères. Vous fermez votre chaîne en ajoutant des guillemets doubles à l'intérieur de guillemets doubles.

Utilisez le var ci-dessous.

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

Le violon par exemple : https://jsfiddle.net/acr2xg6u/

Answer 3

Changez votre jQuery en

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

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

Answer 4

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

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

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

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

Voici le code corrigé :

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