Question

在前置或附加到元素时，它实际上放置文本而不是用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" width="85px" height="79px">
                <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);＆lt; - 我不知道为什么，但我做了
document.createTextNode(string);
设置一个包含HTML标记字符串并设置为之前尝试之一的变量

我使用.get()的原因是因为我有多个对象等于其元素的数量，在这种情况下，我有3.因此，对于每个追加，我有不同的信息。例如：.get（0）,. get（1）等

Answer 1

您正在使用ParentNode.append附加文字DOMString，该文字作为文字节点而不是jQuery#append附加在此处：

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

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

Answer 2

而不是

item.append....

你可以使用：

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

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

＆＃13;

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);

＆＃13;

<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" width="85px" height="79px">

                <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>

＆＃13;

Answer 3

需要从 $（＆＃39; span.tooltip＆＃39;）[0] 中删除

[0] 。它试图访问＆＃34; .tooltip＆＃34; span的第一个孩子，这在DOM中不可用。

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

3 个答案: