Question

我有一个单击按钮，它将在某个元素之前附加一个隐藏的HTML块。我知道这是一个非常简单的问题，但我一直在努力寻找正确的方法。以下是我的摘录。

$("#layout-full-width").click(function(){
       $('#appendFullWidth').html().append().before('#layout-container');
});

HTML

<button class="btn btn-primary" id="layout-full-width">Append</button>

<div id="#layout-container">content</div>

<div class="hidden" id="appendFullWidth">
<div class="col-md-12 layout-fullwidth text-center m-y-10">
    <div class="layout-inner-container">
        <a id="layoutRemove" class="btn btn-circle-table red btn-alignment" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fa fa-trash m-a-0"></i></a>
        <p class="m-a-0 layout-inner-text"><i class="fa fa-plus-circle m-r-10" aria-hidden="true"></i> Hover to add a component</p>
        <ul class="list-inline layout-components">
            <li data-toggle="tooltip" data-placement="top" title="Textarea"><a class="layoutTextArea"><i class="fa fa-file-text-o" aria-hidden="true"></i></a></li>
            <li data-toggle="tooltip" data-placement="top" title="Title"><a href="#"><i class="fa fa-font" aria-hidden="true"></i></a></li>
            <li data-toggle="tooltip" data-placement="top" title="Question"><a href="#"><i class="fa fa-question" aria-hidden="true"></i></a></li>
            <li data-toggle="tooltip" data-placement="top" title="Attachment"><a href="#"><i class="fa fa-paperclip" aria-hidden="true"></i></a></li>
            <li data-toggle="tooltip" data-placement="top" title="Embed"><a href="#"><i class="fa fa-picture-o" aria-hidden="true"></i></a></li>
            <li data-toggle="tooltip" data-placement="top" title="URL"><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
            <li data-toggle="tooltip" data-placement="top" title="" data-original-title="Tags"><a href="#"><i class="fa fa-tags" aria-hidden="true"></i></a></li>
        </ul>
    </div>
</div>

如何在＃layout-container元素之前附加#appendFullWidth html内容。上面的代码不起作用。

Answer 1

首先，jQuery中的$ .html（）方法为您提供html字符串而不是jq元素。

，现在是解决方案：您的div的html代码ID为#layout-container，其中有1个错误，应为layout-container，不带＃号。更改此代码后，以下代码应可以按预期工作。

$("#layout-full-width").click(function(){
       var toAppend=$('#appendFullWidth').children().eq(0);
       toAppend.prependTo('#layout-container'); 

});

此处正在运行js bin链接。https://jsbin.com/ninonul/1/edit?html,js,output

如何在特定元素之前附加HTML块并插入

1 个答案: