如何在 JavaScript 中设置 innerHTML 时绕过解析

发布于 2025-01-11 04:41:40 字数 910 浏览 0 评论 0原文

免责声明：我读了很多关于 Angular 中[innerHTML] 的解析和绕过的内容。找到了一些解决方案，其中包括创建管道并绕过 URL 或 HTML 等。

仍然无法找到好的解决方案。

问题：在将我的 HTML 提供给 DOMParser() 或直接设置 HTML 时，它会解析它（默认情况下），这会导致不适当/不需要的结果。

我有包含这一行的 HTML。

<table border="0" cellpadding="0" cellspacing="0" style="text-align:left;font-size: 15px;" width="100%"> <tbody>${shipmentData.order_items.map((items, i)=>{return ` <tr>...</tr>`})}

在将其传递给 DOMParser 或 insideHTML 时，它会转换为下面的代码，

${shipmentData.order_items.map((items, i)=&gt;{return ` `}).join('')}<table style="text-align:left;font-size: 15px;" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody><tr>

我尝试了上面免责声明中所述的许多解决方案，并尝试使用replaceChildren() 或append 设置内容() 等，但没有一个得到我想要的输出。

有什么方法可以设置 HTML 而不解析任何元素吗？

原文

Disclaimer:
I read a lot of stuff regarding parsing and bypassing of [innerHTML] in Angular.
Found few solutions which includes creating a pipeline and bypass the URL or HTML etc.

Still not able to find out a good solution.

Problem:
While providing my HTML to DOMParser() or setting directly the HTML, it parses it (by default) which leads to inappropriate/unwanted results.

I have HTML which contains this line.

<table border="0" cellpadding="0" cellspacing="0" style="text-align:left;font-size: 15px;" width="100%"> <tbody>${shipmentData.order_items.map((items, i)=>{return ` <tr>...</tr>`})}

While passing this to DOMParser or innerHTML it gets converted into below code

${shipmentData.order_items.map((items, i)=>{return ` `}).join('')}<table style="text-align:left;font-size: 15px;" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody><tr>

I tried many solutions as stated above in disclaimer and also tried setting things using replaceChildren() or append() etc., but none gets the output I want.

Is there any way around to set HTML without parsing to any element?

分享到QQ

分享到微博