Question

如何在dojo中使用div标签包围元素？

<button>Testing</button>
:
<div>
<button>Testing</button>
</div>


<div>Testing <span>something</span></div>
:
<div>
<div>Testing <span>something</span></div>
</div>

Answer 1

最后我找到了答案

Surrounding

var node = domConstruct.create("div");
dojo.addClass(node,"container");
var refNode = dom.byId("refNode");
var tagName = refNode.tagName.toLowerCase();
node.innerHTML="<"+tagName+">"+refNode.innerHTML+"</"+tagName+">";
domConstruct.place(node, refNode,"before");
domConstruct.destroy(refNode);

Answer 2

这个怎么样：

var refNode = dom.byId("refNode");
// make the new div, with the correct class, directly after the node to be wrapped
var node = domConstruct.create("div", {"class":"container"}, refNode, "after");
// move the refNode inside our wrapping node
domContruct.place(refNode, node);

Answer 3

一种快速而肮脏的方法如下所示：

element.outerHTML = '<div>' + element.outerHTML + '</div>';

不需要任何库。请注意，这将更改 element 的类型，因此它无法在类型安全的环境中工作（据我所知）。它仍然很方便，因为您不必删除旧元素并插入新元素。

我还想出了一个 similar approach to replace the tag name and preserve attributes，这可能对每个人都很有趣。

Answer 4

非常简单

 require(["dojo/dom-construct"], function(domConstruct){
      var n = domConstruct.create("div", { innerHTML: "Testing <span>something</span>" });
    });

阅读所有相关信息here

Answer 5

我不知道2013年是怎么回事，但是现在，道场的NodeList操作功能让你可以轻松地完成它。

假设：

<b>one</b>
<b>two</b>

使用：

require(["dojo/query", "dojo/NodeList-manipulate"], function(query){
  query("b").wrap("<div><span></span></div>");
});

输出：

<div><span><b>one</b></span></div>
<div><span><b>two</b></span></div>

此示例来自文档here。

如何用div包围元素

5 个答案: