Создание div внутри другого div

Question

        <div class="outer">
            <ul>
                <li> list one </li> 
                <li> list two </li>
                <li> list three </li>
                <li> list four </li> 
                <li> list five </li>
                <li> list six </li>
            </ul>
        </div>

$( ".outer-grid" ).appendTo( ".outer" );

Как я могу добавить новый div внутри другого div, используя javascript. Существует div с именем "external", поэтому я хочу добавить еще один div с именем "external-grid" внутри этого "внешнего" div. А также весь "li" должен быть внутри недавно созданного div. Я приложил свой код выше для более подробной информации. Если вы, ребята, можете мне помочь, это должно быть хорошо. спасибо:)

Answer 1

Если я правильно понимаю, вы хотите перейти от

<div class="outer">
    <ul>
        <li> list one </li> 
        <li> list two </li>
        <li> list three </li>
        <li> list four </li> 
        <li> list five </li>
        <li> list six </li>
    </ul>
</div>

до

<div class="outer">
    <div class="outer-grid">
        <ul>
            <li> list one </li> 
            <li> list two </li>
            <li> list three </li>
            <li> list four </li> 
            <li> list five </li>
            <li> list six </li>
        </ul>
    </div>
</div>

Мы можем сделать это легко; создайте элемент .outer-grid, поместите в него список и поместите его внутри .outer.

//create the outer-grid element
let outerGrid = $('<div class="outer-grid"></div>');

//put the list in there
let list = $('ul');
outerGrid.append(list);

//put that in the outer element
$('.outer').append(outerGrid);

И все готово! Это работает, потому что мы просто определяем ссылку list на элемент списка и перемещаем ее. То, что мы на мгновение удалили его из DOM, не является проблемой.

Answer 2

Я думаю, вы ищете функцию jquery wrap (): http://api.jquery.com/wrap/

Вы можете попробовать это:

$('.outer ul').wrap("<div class='outer-grid'></div>");