代码之家 › 专栏 › 技术社区 › Pim Jager

如何防止jQuery解析插入的HTML?

dom html jquery javascript

Pim Jager · 技术社区 · 16 年前

有人知道如何阻止jQuery解析通过before()和after()插入的html吗?假设我有一个元素:

<div id='contentdiv'>bla content bla</div>

<div id='wrapperDiv'>
    <div id='beforeDiv'></div>
    <div id='contentDiv'>bla content bla</div>
    <div id='afterDiv'></div>
</div>

我使用以下jQuery/Javascript

$('#contentDiv').each( function() {
    var beforeHTML = "<div id='wrapperDiv'><div id='beforeDiv'></div>";
    var afterHTML = "<div id='afterDiv'></div></div>";  
    $(this).before(beforeHTML);
    $(this).after(afterHTML);
}

但是,这不会导致正确的包装,而是会产生:

<div id='wrapperDiv'>
    <div id='beforeDiv'></div>
</div>
    <div id='contentDiv'>bla content bla</div>
    <div id='afterDiv'></div>

使用wrap()也不起作用,因为在使用以下命令时,这会使jQuery更加混乱:

$(this).wrap("<div id='wrapperDiv'><div id='beforeDiv'></div><div id='afterDiv'></div></div>");

我应该如何解决这个问题?
提前谢谢!

4 回复 | 直到 16 年前

Owen Ryan Doherty 16 年前

$('#contentDiv').each(function() {
    $(this).wrap('<div id="wrapperDiv">');
    $(this).before('<div id="beforeDiv">');
    $(this).after('<div id="afterDiv">');
});

生产:

<div id='wrapperDiv'>
    <div id='beforeDiv'></div>
    <div id='contentDiv'>bla content bla</div>
    <div id='afterDiv'></div>
</div>

scunliffe 16 年前

您的标记不完整…前后仅获取完整节点。。。

你想做的是包你的内容,这是不同的。

你想要这个:

.wrap(html);

http://docs.jquery.com/Manipulation/wrap#html

jishi 16 年前

我认为你的做法是错误的。想想你真正想要达到的目标。。。

如果您碰巧将实际的HTML作为字符串(来自XHR或其他东西),那么您需要读出HTML并按照Douglas Mayle的建议将其连接起来。

Douglas Mayle 16 年前

$('#contentDiv').each( function() {
    var beforeHTML = "<div id='wrapperDiv'><div id='beforeDiv'></div>";
    var afterHTML = "<div id='afterDiv'></div></div>";

    // This line below will do it...
    $(this).html(beforeHTML + $(this).html() + afterHTML);
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

6 月前

user28928120 · 如何在jquery中选择所有类?

6 月前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

6 月前