DIV clone from one page to another

Question

Hello I’m having trouble copying the side menu of the home page to the category page, I usually use the command below to copy div to the same page, but for different pages I’m not getting

<script type="text/javascript">
$(function(){
    $('.pagina-inicial .menu.lateral.fechado.borda-principal').clone().appendTo($('.pagina-categoria .coluna.span3.esquerda'));
});

do not know if I need to allocate the information elsewhere and then play on the page I want or make a direct copy

Answer 1

You cannot do this with Javascript because it requires server-side handling. Javascript is only for the client, it will only work for the same page.

What you can do is in a standard js file that will be used on all pages, create the side menu in Javascript and include in an element that will exist on all pages.

I used jQuery. Just add the library to the head of your document.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

The same can be done in pure Javascript, just call the function in window.onload.

Simply put, it would be something like this:

Html

<div id="areaDoMenu">

</div>

jQuery

$(document).ready(function() {
$("#areaDoMenu").append(
          '<ul>' +
            '<li>Item 1</li>' +
            '<li>Item 2</li>' +
            '<li>Item 3</li>' +
            '<li>Item 4</li>' +
            '<li>Item 5</li>' +
          '</ul>');
});

See here > http://jsfiddle.net/Lc0eprhs/