
Some web developers prefer to put their <script> tags at the end of page body and not inside the <head> tags:

[source,html]
----

<html>

<head>
//no <script> tag here...
</head>

<body>
...
<script>
//one or more <script> tags at the end of the body
</script> 
</body>
</html>

----


In Wicket we can achieve this result providing a custom _IHeaderResponseDecorator_ to a our application and using Wicket tag <wicket:container/> to indicate where we want to render our scripts inside the page. Interface _IHeaderResponseDecorator_ defines method _IHeaderResponse decorate(IHeaderResponse response)_ which allows to decorate or add functionalities to Wicket _IHeaderResponse_. Our custom _IHeaderResponseDecorator_ can be registered in the application via the method _getHeaderResponseDecorators_. Anytime Wicket creates an instance of _IHeaderResponse_, it will call the registered _IHeaderResponseDecorators_ to decorate the header response.

In the example project _ScriptInsideBody_ we can find a custom _IHeaderResponseDecorator_ that renders CSS into the usual <head> tag and put JavaScript header items into a specific container (tag <wicket:container/>)
Wicket already comes with class _JavaScriptFilteredIntoFooterHeaderResponse_ which wraps a _IHeaderResponse_ and renders in a given container all the instances of _JavaScriptHeaderItem_.
The following code is taken from the Application class of the project:

[source,java]
----

    //...
    @Override
    public void init()
    {
       getHeaderResponseDecorators().add(response -> new JavaScriptFilteredIntoFooterHeaderResponse(response, "footer-container"));
    }

----

As you can see in the code above the _bucket_ that will contain JavaScript tags is called _footer-container_ To make a use of it the developer have to add a special component called _HeaderResponseContainer_ in his page:

[source,java]
----
add(new HeaderResponseContainer("someId", "filterName"));
----

Please note that _HeaderResponseContainer_'s needs also a name for the corresponding header response's filter. The markup of our page will look like this:

[source,html]
----

<html>

<header>
<!-- no <script> tag here... -->
</header>

<body>
<h1 id="click-me">Click me!</h1>
<!-- here we will have our JavaScript tags -->
<wicket:container wicket:id="someId"/> 
</body>
</html>

----

The code of the home page is the following:

[source,java]
----
   public HomePage(final PageParameters parameters) {
        super(parameters);

        add(new HeaderResponseContainer("footer-container", "footer-container"));
    }

    @Override
    public void renderHead(IHeaderResponse response) {
        response.render(JavaScriptHeaderItem.forReference(new PackageResourceReference(getClass(),
                "javascriptLibrary.js")));

        response.render(OnEventHeaderItem.forScript("'click-me'", "click", "alert('Clicked me!')"));
    }
----

Looking at the code above you can note that our page adds two script to the header section: the first is an instance of _JavaScriptHeaderItem_ and will be rendered in the _HeaderResponseContainer_ while the second will follow the usual behavior and will be rendered inside <head> tag.




