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

在前面加上或附加到一个元素，它确实使文本和HTML中不编译：为什么文字HTML字符串被附加到DOM？

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); < - 我不知道为什么，但我确实
document.createTextNode(string);
设置包含HTML标签的字符串变量，并设置为先前的尝试之一

而我使用.get()的原因是因为我有mo而不是等于它们元素数量的一个对象，在这种情况下，我有3个。所以，对于每个附加，我有不同的信息。如：获得（0），获得（1）等

来源

2017-07-06 Rick Stanley

使用'.EQ（0）'代替'[0]''中VAR项= ...;''作为返回eq' jQuery对象和'[ ]'返回原始的HTML DOM元素。或者将DOM元素包装在一个jQuery对象中：'var item = $（$（'span.tooltip'）[0]）;'。 –

您使用ParentNode.append追加文字DOMString被追加为一个文本节点，而不是jQuery#append这里：

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

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

来源

2017-07-06 16:30:02 Li357

[0]需要从$（'span.tooltip'）[0]中删除。它试图访问在DOM中不可用的第一个孩子“.tooltip” span。

来源

2017-07-06 16:35:16 Arun

而不是

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" 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>

来源

2017-07-06 16:38:44 gaetanoM

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

回答

相关问题