如何使用 jQuery append() 执行广泛的 DOM 插入(以正确的顺序)?
当我使用 jQuery append()
方法时,生成的 HTML 输出不符合我想要的顺序。
正如您在下面的测试用例中看到的那样,每当我打开 DIV
标记而不关闭它时,它都会关闭。
标签之后关闭嵌套在它下面。
标签也是如此 - 它也在我预期之前关闭 - 我希望它在第二个
按照编写顺序构建大型动态 HTML 块的最佳方法是什么?
$('#a').remove(); // remove #a from the dom and re-insert it dynamically
$("<div id='a'>").insertAfter('div#main');
$('#a').append(" <ul>");
$('#a').append(" <li>A</li>");
$('#a').append(" <li>B</li>");
$('#a').append(" </ul>");
$('#a').append(" <div id='X1'>");
$('#a').append(" <div id='b'>");
$('#a').append(" <div id='b1'></div>");
$('#a').append(" <div id='b2'></div>");
$('#a').append(" </div>");
$('#a').append(" <div id='c'>");
$('#a').append(" <p id='c1'></p>");
$('#a').append(" </div>");
$('#a').append(" </div>");
$('#a').append(" <div id='X2'>B</div>");
$('#a').append("</div>");
<div id="main>
<div id="a>
<ul></ul> // <ul> tag is closed!?
<li>A</li>
<li>B</li>
<div id='X1'></div> // div is closed!?
<div id='b'> // div is closed!?
<div id='b1'></div>
<div id='b2'></div>
<div id='c'></div> // div is closed!?
<p id='c1'></p>
<div id='X2'>B</div>
</div>
</div>
When I use the jQuery append()
method, the resulting HTML output is not in the order I intend.
As you see in the test case below, any time I open a DIV
tag without closing it, it is closed nevertheless.
The same goes for the <ul>
tag - which was also closed before I expected - I wanted it to be closed after the second <li>
tag that is supposed to be nested below it.
What's the best way to build a large block of dynamic HTML in the order it is written?
$('#a').remove(); // remove #a from the dom and re-insert it dynamically
$("<div id='a'>").insertAfter('div#main');
$('#a').append(" <ul>");
$('#a').append(" <li>A</li>");
$('#a').append(" <li>B</li>");
$('#a').append(" </ul>");
$('#a').append(" <div id='X1'>");
$('#a').append(" <div id='b'>");
$('#a').append(" <div id='b1'></div>");
$('#a').append(" <div id='b2'></div>");
$('#a').append(" </div>");
$('#a').append(" <div id='c'>");
$('#a').append(" <p id='c1'></p>");
$('#a').append(" </div>");
$('#a').append(" </div>");
$('#a').append(" <div id='X2'>B</div>");
$('#a').append("</div>");
<div id="main>
<div id="a>
<ul></ul> // <ul> tag is closed!?
<li>A</li>
<li>B</li>
<div id='X1'></div> // div is closed!?
<div id='b'> // div is closed!?
<div id='b1'></div>
<div id='b2'></div>
<div id='c'></div> // div is closed!?
<p id='c1'></p>
<div id='X2'>B</div>
</div>
</div>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
这里要记住的重要一点是
.append()
不会附加 HTML,它附加由您传入的 HTML 生成的 DOM 元素,因此例如将是
;
元素就像你看到的那样。要使其间隔与当前的间隔相似,您需要附加每一行或使用
\
,如下所示:您可以在这里测试一下。
The important thing to remember here is that
.append()
doesn't append HTML, it appends DOM elements generated by the HTML you pass in, so for example<ul>
will be a<ul></ul>
element like you're seeing.To have it spaced out similar to what you have currently, you either need to append each line or use
\
like this:You can test it out here.
使用简单的 StringBuffer 实现,如下所示。一旦 html 完全离线缓冲,立即将其写入 DOM:
并参见:http://developer.yahoo.com/performance/rules.html
Use a simple StringBuffer implementation, such as the one below. Once the html has been fully buffered offline, write it to the DOM all at once:
And see: http://developer.yahoo.com/performance/rules.html
您需要首先构建完整的字符串,然后将其传递给附加:
有更有效的方法来构建该字符串,但是......您明白了。
You need to build the complete string first, then pass that to append:
there are more efficient ways to build that string, but... you get the idea.
jQuery 附加设计用于处理完整的 HTML 片段。只需将您的代码修改为所有append()一次,然后将所有代码连接在一起传递给它。如果不这样做,append() 将自动关闭所有打开的标签。
jQuery append is designed to work with a complete snippet of HTML. Modify your code to all append() only once and pass it all your code concatenated together. If you do not, append() will close any open tags automatically.