为啥将文字 HTML 字符串附加到 DOM？

Posted 2023-05-09

【中文标题】为啥将文字 HTML 字符串附加到 DOM？

【英文标题】：Why are literal HTML strings being appended to the DOM?为什么将文字 HTML 字符串附加到 DOM？

【发布时间】：2017-12-10 18:49:16

【问题描述】：

在添加或附加到元素时，它会按字面意思放置文本，而不是在 html 中编译：

var banner =
    'Format': '90x120cm',
    'Value': 35
;
// var premium =  key: values ;

function defineProduct(data) 
        var item = $('span.tooltip')[0];
        console.log($('span.tooltip'));
        for(var keys in data)
            console.log(keys);
            item.append('<div class="item"><div class="left">'+keys+':</div><div class="right ">'+data[keys]+'</div></div>');
        
    

defineProduct(banner);

HTML：

<div class="three-columns">
        <div class="col">
            <div class="image-holder">
                <a href='' id="premium" class="tooltips">
                <img src="" class="premium-img"  >
                <p class="description">Cartão <br><span style="color: #ffc600;" class="different">premium</span></p>
                    <span class="tooltip"></span>
                </a>
            </div>
        <!-- Same thing from above different description -->
        <!-- ditto -->
</div>

输出：

我尝试/使用了什么：

.get(); .prepend(string); .html(string); .text(string); document.createTextNode(string); 设置一个包含 HTML 标记字符串的变量并设置为之前的尝试之一

我使用.get() 的原因是因为我有多个对象，它们的元素数量相等，在这种情况下，我有 3 个。所以，对于每个附加，我都有不同的信息。例如：.get(0)、.get(1) 等

【问题讨论】：

在var item = ...; 中使用.eq(0) 而不是[0]，因为eq 返回一个jQuery 对象，[] 返回原始HTML DOM 元素。或者将 DOM 元素包装在一个 jQuery 对象中：var item = $( $('span.tooltip')[0] );.

【参考方案1】：

您正在使用ParentNode.append 附加文字DOMString，它作为文本节点而不是jQuery#append 在这里附加：

var item = $('span.tooltip')[0];

[0] 访问 jQuery 对象中的底层 DOM 元素。删除 [0] 以在其上使用 jQuery 方法（或 eq(0) 将选择集合中的第一个元素作为 jQuery 对象）或使用 Node.appendChild。

【参考方案2】：

代替

item.append....

你可以使用：

item.insertAdjacentHTML('beforeend',....

insertAdjacentHTML：将指定的文本解析为 HTML 或 XML，并将生成的节点插入到 DOM 树中的指定位置。

var banner = 
      'Format': '90x120cm',
      'Value': 35
  ;

  function defineProduct(data) 
      var item = $('span.tooltip')[0];
      //console.log($('span.tooltip'));
      for (var keys in data) 
          //console.log(keys);
          item.insertAdjacentHTML('beforeend', '<div class="item"><div class="left">' + keys + ':</div><div class="right ">' + data[keys] + '</div></div>');
      
  

  defineProduct(banner);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="three-columns">
    <div class="col">
        <div class="image-holder">
            <a href='' id="premium" class="tooltips">
                <img src="" class="premium-img"  >

                <p class="description">Cartão <br><span style="color: #ffc600;" class="different">premium</span></p>
                <span class="tooltip"></span>
            </a>
        </div>
        <!-- Same thing from above different description -->
        <!-- ditto -->
    </div>
</div>

【讨论】：

使用 insertAdjacentHTML 会让你打开 XSS 攻击！！！

@ShivamKumar 是的，你是对的。事实上，XSS 也可以通过 jQuery append 发生。我的目的是证明你可以使用纯 javascript 来避免 jQuery。

【参考方案3】：

[0] 需要从 $('span.tooltip')[0] 中删除。它正在尝试访问 DOM 中不可用的 ".tooltip" 跨度的第一个子级。