Question

我有以下HTML代码

<div id="myDiv">
   <p>content</p>
</div>

以及以下JS代码：

$('myDiv').set('html',htmlCode);

问题是变量htmlCode是这样的：

<div id="myDiv"><p>another content</p></div>

所以，当我运行JS代码时的结果是：

<div id="myDiv">
   <div id="myDiv">
      <p>another content</p>
   </div>
</div>

有没有办法使用“set”来覆盖整个div？或另一种解决方案，以获得类似的东西：

<div id="myDiv">
   <p>another content</p>
</div>

作为JS脚本的结果？我知道我可以改变变量htmlCode ...我只是想知道是否有另一个解决方案。

Answer 1

Mootools提供了一种简单的replaces方法！

//new tmp element that contains the new div
var tmpDiv = new Element('div',{html:'<div id="myDiv"><p>another content</p></div>'});

//new div (first child of my tmp div) replaces the old 'myDiv' (that can be grabbed from the DOM by $)
tmpDiv.getFirst().replaces($('myDiv'));

Answer 2

String.implement({
    replaces: function(toReplace) {
        Elements.from(this).inject(toReplace, 'after');
        toReplace.destroy();
    }
});

'<div id="a"><p>ipsum</p></div>'.replaces($('a'));

这应该做。示例：http://jsfiddle.net/UvuwG/

Answer 3

$('myDiv').empty();
$('myDiv').adopt(Elements.from(htmlCode).getElement('p'));

Answer 4

你可以做到

$("myDiv").getParent().set("html", htmlCode);

mootools取代了div的内容

4 个答案: