在javascript中将一个标签的文本内容包装到另一个标签中

2024-04-22

我有以下 html 结构:

<span>foobar</span>

我想使用纯 javascript 将这个跨度的文本内容包装到另一个标签中,如下所示:

<span><p>foobar</p></span>

我已经尝试过这个但没有成功:

span.appendChild(virtualDoc.createElement('p'));

感谢您阅读我!


Use Element.childNodes and .append()

// DOM utility functions:

const el = (sel, par) => (par || document).querySelector(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);


// Task: Wrap and re-append:

const elTarget = el("div");  // Demo only. Use a better, unique selector instead
const elParagr = elNew("p"); // Create the Paragraph

elParagr.append(...elTarget.childNodes); // Append childNodes to Paragraph
elTarget.append(elParagr); // Insert all back into the target element
div {border: 2px solid red;}
p {border: 2px solid blue;}
<!-- P inside SPAN is invalid HTML markup, use a DIV instead! -->
<div>foobar <b>baz</b></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在javascript中将一个标签的文本内容包装到另一个标签中 的相关文章

随机推荐