爲什麼文字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？

回答

相關問題