Как показать HTML DOM-объект в html, используя innerHTML - PullRequest
Новая
       0

Как показать HTML DOM-объект в html, используя innerHTML

0 голосов
/ 10 марта 2020

Доменный объект имеет то, что я анализирую строку html, используя DOMParser, и редактирую это html

domObj= '
<html> 
<head>
<style>
</style>
</head>
<body>
<p>this is a paragraph</p>
</body>
</html>'

** В компоненте. html **

<div [innerHTML]="domObj"></div>

Я получаю результат в браузере [объект HTMLDocument]

Ответы [ 3 ]

0 голосов
/ 10 марта 2020

См. DOMParser 

const domObj= '<html> \
<head> 
<style> 
</style> 
</head> 
<body> 
<p>this is a paragraph</p> 
</body> 
</html>';

Получить объект документа 

let doc = parser.parseFromString(domObj, "application/xml")

Построить строку XML 

let xml = new XMLSerializer().serializeToString(doc.documentElement);

Выбрать и установить внутренний HTML

document.getElementById('titlebar').innerHTML = xml;
0 голосов
/ 10 марта 2020

То, что вы пытались сделать, было правильно, но вы должны использовать tild (`) вместо одинарных кавычек ('). Проверьте реализацию стекаблица Здесь

Здесь вы можете обратиться к литералам шаблона Здесь

Решение -1. Использование одинарных кавычек (') 

domObj=
    '<html>'+ 
    '<head>'+
    '<style>'+
    '</style>'+
    '</head>'+
    '<body>'+
    '<p>this is a paragraph</p>'+
    '</body>'+
    '</html>'
}

Решение - 2. Использование tild (`) 

domObj=`
    <html> 
    <head>
    <style>
    </style>
    </head>
    <body>
    <p>this is a paragraph</p>
    </body>
    </html>`
}
0 голосов
/ 10 марта 2020

Используйте одиночный обратный тик: 

domObj= `<html> 
<head>
<style>
</style>
</head>
<body>
<p>this is a paragraph</p>
</body>
</html>`

отл. https://stackblitz.com/edit/angular-fkv6bw?file=src / приложение / app.component.ts

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

Нет похожих вопросов

...