Как я могу вставить тег в другой тег?

Question

у меня есть что-то вроде этого генерируется JQuery:

<p id="foo1">content</p>

, как я могу получить это с помощью JavaScript?

<pre><p id="foo1">content</p></pre>

Answer 1

вы можете использовать HTML DOM AppendChild() метод. Используется для добавления узла в качестве последнего дочернего узла.

Answer 2

Использование JavaScript:

function wrap(elTarget, elWrapper) { 
 
    elTarget.parentNode.insertBefore(elWrapper, elTarget); 
 
    elWrapper.appendChild(elTarget); 
 
} 
 

 
wrap(document.getElementById("foo1"), document.createElement("pre"))

<p id="foo1">content</p>

---

Использование JQuery-х wrap:

$("#foo1").wrap("<pre></pre>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p id="foo1">content</p>

Answer 3

Попросту Javascript, вы можете создать новый тег, вставьте его до вашего существующего содержимого, а затем переместить содержимое внутри нового тега:

var pre = document.createElement("pre"); 
var content = document.getElementById("foo1") 
content.parentNode.insertBefore(pre, content); 
pre.appendChild(content); 

---

Поскольку вы упоминаете JQuery в тексте Вашего вопроса , вы также можете использовать jQuery's .wrap(), чтобы сделать то же самое.

$("#foo1").wrap("<pre>"); 

Answer 4

Пользователь .wrap() click

$(document).ready(function() { 
 
    $("button#submit").click(function() { 
 
    $("p#foo1").wrap("<pre></pre>"); 
 
    }); 
 
});

<script src="http://code.jquery.com/jquery-latest.js"></script> 
 

 
<p id="foo1">content</p> 
 
<button id="submit">Insert tag</button>