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" );

如何使用JavaScript在另一个div内添加新的div。有一个名为“外部”的div，所以我想在该“外部” div中添加另一个名为“外部网格”的div。整个“ li”也应位于新创建的div中。我已经在上面附加了我的代码以获取更多详细信息。如果你们能帮助我，那一定很好。谢谢：）

Answer 1

我认为您正在寻找jquery wrap（）函数： http://api.jquery.com/wrap/

您可以尝试以下方法：

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

Answer 2

如果我理解正确，那么您希望

<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元素的引用list并进行移动。我们暂时将其从DOM中删除并不是一个问题。

在另一个div内创建div

2 个答案: