javascript - 如何用div包围元素

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

最后我找到了答案

周围

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

它很简单

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

在这里阅读所有相关信息

Answer 3

这个怎么样 ：

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 4

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

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

不需要任何库。请注意，这将在后台创建一个新对象，因此您必须element再次检索以获取周围的元素，以防以后需要它。

总的来说，它很方便，因为您不必删除旧元素并插入新元素。

I also came up with a similar approach to replace the tag name and preserve attributes, which might be interesting for one or another.

Answer 5

我不知道 2013 年的情况如何，但如今，dojo 的 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>

此示例取自此处的文档。