Vfrdtyky

I have a button which on click It will append a hidden HTML block, before a certain element. I know this is a very simple question but I was struggling to find out the correct way of doing it. Following is my snippet.

$("#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>

How to append #appendFullWidth html content before #layout-container element. The above code does not work.

First of all $.html() method in jQuery give you html string and not the jq element.

and now the solution:
There is 1 mistake in you html code id of you div is #layout-container it should be layout-container without the #.
After changing this following code should work as you expect.

$("#layout-full-width").click(function(){

       var toAppend=$('#appendFullWidth').children().eq(0);

       toAppend.prependTo('#layout-container'); 



}); 

Here is working js bin link.https://jsbin.com/ninonul/1/edit?html,js,output