将HTML输入到包含的索引页面

I am trying to improve an old website which has been created by having one index.php

Which is behaving like a parent to several sub sites which then insert their specific contents into the parent using javascript (getElement, add all sorts of content and then appendChild).

This results in a huge code to just create a little form, which can be done far neater with HTML.

Thus my question;

how can I input HTML content into a parent file's elements without creating these contents all with javascript?

I am looking for a solution like:

<?php
include_once('index.php');
?>
<ul id="nav">
    <li class="navi"><a href="processlogout.php">Log uit</a></li>
</ul>
<script>
somehow insert newly created unsorted list "nav" into the included index.php
</script>

I hope I have formulated my question clearly and am looking forward to your answers!

I have found what I was looking for, it was innerHTML
This way I can simply type an HTML code inside javascript which is then inputted into the included php as I wanted.
Example;

document.getElementById('databox').innerHTML = 
'<div class = "selectform">' +
    '<form id="login" method="post" action="requestklant.php">' +
        '<select name="klantdropdown"></select>' +
        '<button type="submit">Opvragen</button>'+ 
  '</form>' +
'</div>';

Thank you for your suggestions and effort, though.

I thing best to use angularJs for this.