2016-03-01 10 views
1

У меня есть объект json, который имеет значение html со стилями. Я попытался включить его в свой html, используя jquery append.Как анализировать теги HTML из объекта JSON

Значение получает добавление, но оно не преобразуется в нормальный DOM, оно добавляет все это как строку.

Это мой JSON значение объекта:

var obj = { 
    content : "<p>&lt;linkrel=&quot;stylesheet&quot;type=&quot;text/css&quot;href=&quot;http:<p>&lt;styletype=&quot;text/css&quot;&gt;<br/>.wrap{<br/>&nbsp;&nbsp;background-color:#F6F6F6;<br/>}<br/>&lt;/style&gt;</p><p>&lt;divclass=&quot;wrap&quot;&gt;<br/> &lt;/div&gt;</p>" 
} 

Это то, что я пробовал:

HTML:

<div id='container'></div> 

JS:

$('#container').append(obj.content); 

Demo

Выход должен быть частью dom, вместо этого он печатает всю вещь как строку.

ответ

2

Вы можете сделать что-то вроде этого ...

var obj = { 
    content : '<p>&lt;style&gt;.wrap{color:red}&lt;/style&gt;&lt;div class="wrap"&gt;aa&lt;/div&gt;</p>' 
} 

$('span').append($(document.createElement('div')).html(obj.content).text()); 

скрипач: https://jsfiddle.net/suscmguy/

Вашего obj.content кажется недействительным/неполной кодирующим

Надеется, что это помогает ...

+0

Добро пожаловать! Счастливое кодирование ...;) –

4

Можете ли вы пытаетесь делания:

$('#container').append($(obj.content)); 

Это должно работать. Поскольку вы просто пытаетесь добавить текст, а не элементы DOM

Другое изменение - ответ JSON, так как он имеет p теги и htmlescaped элементов. Таким образом, вы, возможно, придется изменить ответ немного слишком, например,

  1. Изменение ссылку таблицы стилей к style тег, прикрепленный к div.
  2. отправьте ответ как неизолированный, что поможет уменьшить беспорядок.

Надеюсь, что это поможет!

+0

Пробовал, но не повезло –

+0

Можете привести пример с демонстрацией –

+0

Можете ли вы разместить скрипку, пожалуйста? Это тот, который я пробовал. https://jsfiddle.net/318e0mx3/ –

1

Ваше форматирование строки неверно, потому что, когда я заменил ваш код на следующий код, он отлично работал нормально

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

</head> 
<body> 
    <div id='tester'></div> 
    <script > 
     var obj = { 
     content : "<ul><li>coffee</li><li>tea</li></ul>'" 
     }; 

     $('#tester').append(obj.content); 
    </script> 
</body> 
</html> 

, что я хочу сказать, вы думаете, что вы добавляете HTML код, но из-за вашей плохой строки форматирования JavaScript думает, что это просто строка, и именно поэтому у см добавлена ​​строка.

Смежные вопросы