javascript - 将 html 元素插入另一个具有多个类的 html 元素

Question

我正在开发一个Web应用程序，该应用程序包含以下元素:

<div id="flip" class="container">
        <div class="f-page f-cover" id="cover">
            <div class="cover-elements">
                <div class="f-cover-story">
                    <span>Life Events</span>Photo Album
                </div>
            </div>
            <div class="f-cover-flip">&lt; swipe</div>
        </div>

        <div class="f-page f-cover-back">
            <div id="codrops-ad-wrapper">
                <a href="index.jsp" >Back to bookshelf</a>
            </div>
        </div>
    </div>

我想像其他 div 一样在

之间添加 html 元素

<div class="f-page f-cover" id="cover">
                <div class="cover-elements">
                    <div class="f-cover-story">
                        <span>Life Events</span>Photo Album
                    </div>
                </div>
                <div class="f-cover-flip">&lt; swipe</div>
            </div>

和

<div class="f-page   f-cover-back">
                    <div id="codrops-ad-wrapper">
                        <a href="index.jsp" >Back to bookshelf</a>
                    </div>

            </div>

为此，我搜索了 jquery 框架并找到了 .insertAfter 方法。

这就是我到目前为止尝试过的:

$(result_html).insertAfter( "#cover" );

其中 result_html 是我的字符串，其中加载了我要添加的 html 元素

和

$(result_html).insertAfter( ".f-page f-cover" );

在第一个中，我尝试使用我想要将其放置在旁边的 div 的 id 添加它，第二个是我引用的类。

虽然在jquery insertafter method使用 div 的类，在我的例子中，我的 div 有 2 个类名。

我该如何解决这个问题？目前，f-page f-cover div 旁边没有插入任何内容。

Answer 1

如果您选择具有多个类的元素，则不能在这些类之间使用空格。这将选择父子。

这将插入到具有两个类的元素之后:

$(result_html).insertAfter( ".f-page.f-cover" );

这将插入到具有 id 的元素之后:

$(result_html).insertAfter( "#cover" );

两者都工作正常:Demo