Установить HTML-тег как значение объекта

Question

У меня есть HTML-теги, которые я хочу отображать в виде HTML (не строки) внутри объекта, проблема в том, что когда я его отображаю, он все еще отображается как текст, а не как HTML

var obj = {  "CategoryItemID": "ID",
             "ItemName": "name",
             "options":"<a title='Edit' ng-click='edit()' id='btnEdit'><span class='glyphicon glyphicon-pencil' aria-hidden='true'></span></a> |" +
                        "<a title='Delete' ng-click='delete()' " +
                        "id='btnDelete'><span style='color:red' class='fa fa-times' aria-hidden='true'></span></a>",
                           "children": "",
          }

Как я могу читать с объекта как HTML?

Answer 1

Использование DOM Parser. Вот пример

 var obj = {  "CategoryItemID": "ID",
                           "ItemName": "name",
                           "options":"<a title='Edit' ng-click='edit()' id='btnEdit'><span class='glyphicon glyphicon-pencil' aria-hidden='true'></span></a> |" +
                        "<a title='Delete' ng-click='delete()' " +
                        "id='btnDelete'><span style='color:red' class='fa fa-times' aria-hidden='true'></span></a>",
                           "children": "",
                       }
                       
var parser = new DOMParser()
var node = parser.parseFromString(obj.options, "text/html");
console.log(node.body.innerHTML)

Доступ ко всему, что вы хотите получить, можно получить следующим образом

node.body.getElementsByTagName("a")
node.body.getElementsByClassName("something")

Попробуйте показать это в таблице

  var obj = {  "CategoryItemID": "ID",
                               "ItemName": "name",
                               "options":"<a title='Edit' ng-click='edit()' id='btnEdit'><span class='glyphicon glyphicon-pencil' aria-hidden='true'></span></a> |" +
                            "<a title='Delete' ng-click='delete()' " +
                            "id='btnDelete'><span style='color:red' class='fa fa-times' aria-hidden='true'></span></a>",
                               "children": "",
                           }
                           
    var parser = new DOMParser()
    var node = parser.parseFromString(obj.options, "text/html");
document.getElementsByClassName("option")[0].innerHTML=node.body.innerHTML;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"/>
<table>
  <tr>
    <th>Name</th>
    <th>Option</th>
  </tr>
  <tr>
    <td>Sourabh</td>
    <td class="option"></td>
  </tr>
</table>

Answer 2

const stringContainingHTMLSource = obj.options;
const parser = new DOMParser();
const doc = parser.parseFromString(stringContainingHTMLSource, "text/html");

Разбор документа SVG или HTML

Answer 3

Назначьте свойство объекта innerHTML соответствующего элемента, который вы хотите отобразить.

HTML

<div id="displayObject">
</div>

JS

var displayObj = document.getElementById('displayObject');
displayObj.innerHTML = obj.options;

Answer 4

Создайте фиктивный элемент DOM и добавьте в него строку HTML. Затем вы можете манипулировать им как любым элементом DOM.

var el = document.createElement( 'html' );
el.innerHTML = obj.options;