jQuery，创建一个可以插入到页面中的 HTML block

Question

我有以下 html:

<div id="box">
<span>stuff.....</span>
</div>

我想做的是用这个 html 创建一个 JavaScript 变量...然后用 jQuery 能够将它插入到页面中，比如 $('#contentCol').html(mystuff)

除了一长串 html 之外，有没有一种优雅的方法可以做到这一点？

Answer 1

ID名称是唯一的，因此我将id="box"更改为class="box"，这样您就可以多次插入该 block 。

只需创建一个返回所需类型的 jQuery 对象的函数即可。您可以将 span 内的 HTML 作为参数传递给函数:

function createBlock(myHTML) {

    $("<div/>").attr("class", "box").append($("<span/>").html(myHTML));
}

您可以通过多种方式使用此功能:

// Method 1:
var myStuff = createBlock("stuff");
$("body").append(myStuff);
  // or even...
$('#contentCol').html(myStuff)

// Method 2:
$("body").append(createBlock("other stuff"));

// You can of course append wherever you want... or prepend, or before / after
//   or use the jQuery object to build up an even larger block before inserting.

<强> jsFiddle example