通过让jQuery创建它可以简化这个HTML吗？

Question

我有创建一个小气泡的代码。我将在即将到来的网站上提供其中几十个，但创建div的代码对于我想写出来的内容来说有点太过分了，每次我想添加一个泡泡。

我想要的是使用jQuery和.html（）属性为我创建大部分代码。我仍然在学习jQuery，所以任何帮助都可以成为我的一个很好的学习资源。

这是当前HTML：

<div id="bubbleWrapper"> 
    <div class="bubbleTop"></div> 
    <div class="bubbleText">ryan jay</div> 
</div> 

我对所有这些样式表，但它现在并不重要。

我想什么是能够做到的，就是当我想在页面上添加一个泡沫，我就可以使用这样的事情：

<div class="bubble">ryan jay</div> 

而jQuery的会重新创建第一个代码示例。这是可能的吗？我有点失落，我会怎么做。

感谢您的时间和帮助！

Answer 1

试试这个：

$(".bubble").each(function() { 
    $wrapper = $("<div></div>").addClass("bubbleWrapper"); 
    $top = $("<div></div>").addClass("bubbleTop"); 
    $(this).addClass("bubbleText").wrap($wrapper).before($top); 
}); 

注意我给包裹div一类bubbleWrapper，而不是一个id，因为这将让你有整个页面的这一多个版本，而无需重复id，这将使该页面无效。

同样值得注意的是，如果您没有启用JavaScript，任何人都可以完全切断此功能。更好的DRY原则是在你的服务器端代码中创建一个函数，在那里你传递一个字符串（在bubbleText div中使用），并为你生成这个HTML。

Answer 2

您可以将插入，无论你想这些气泡对象中的一个功能：

function createBubble(text, insertPoint) { 
    var elem = document.createElement("div"); 
    elem.className = "bubbleWrapper"; 
    elem.innerHTML = '<div class="bubbleTop"></div><div class="bubbleText">' + text + '</div>'; 
    insertPoint.parentNode.insertBefore(elem, insertPoint.nextSibling); 
} 

注：我改变bubbleWrapper一类的名字，因为你不能对多个对象相同的ID。

Answer 3

如果您将创建很多元素，我建议使用原生javascript。

因为在创建dom元素时，jQuery和原生JavaScript之间存在巨大的时间差异。也许原生JavaScript的方式并不清洁，但它绝对是更快的方式。