javascript 將一個標簽的文本內容包裝到另一個標簽中

Question

我有以下 html 結構：

<span>foobar</span>

我想使用純 javascript 將此跨度的文本內容包裝到另一個標簽中：

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

我已經嘗試過但沒有成功：

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

感謝您閱讀我！

Answer 1

使用Element.childNodes和.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>

Answer 2

你好，你可以通過 function 輕松地做到這一點，他會在添加 P 元素之前先保存以前的內容。 請檢查以下代碼：

<span id="span">foobar</span>
<input type="button" value="add element" onclick="addElem()">

function addElem(){

  content = document.getElementById("span").innerHTML;
    document.getElementById("span").innerHTML = "<p>"+ content +"</p>";

}

小提琴： https://jsfiddle.net/p2czo5qe/

Answer 3

您可以使用 Javascript function innerHTML輕松存檔。 像那樣：

注意您真的確定要將 p 標簽包裝在 span 標簽內嗎？

 function addElem() { spans = document.querySelectorAll('div span'); container = document.querySelector('div'); nc = ''; spans.forEach(s => { c = s.innerHTML; nc = nc + `<p>${c}</p>`; }); container.innerHTML = '<span>' + nc + '</span>'; }

 span { color: red; } span p { color: green; }

 <div> <span>foobar</span> <span>baz</span> </div> <input type="button" value="add element" onclick="addElem()">

Output結構

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