[__Alex__]

Добрый день.

Мне нужно вставлять в DOM, узлы в виде строк, и привешивать к ним listener's.

Вставляю через innerHTML, на практике, работают listener's только из последней вставки. Упрощённо:

<div id='main'></div>
<div id='out'></div>

    <script>
        function out(data) {
            document.getElementById('out').innerHTML += data;
        }

        var main = document.getElementById('main');

        function module1() {
            main.innerHTML = '<div id="first">Some text, id=first </div><br />';
            document.getElementById('first').addEventListener('click', function() {
                out('clicked on first id ');
            });
        }

        function module2() {
            main.innerHTML += '<div id="second">Some text, id=second </div><br />';
            document.getElementById('second').addEventListener('click', function() {
                out('clicked on second id ');
            });
        }

        module1();
        module2();
    </script>

Возможно при применении +=innerHTML затираются более ранние listener's? Но в документации ничего не нашёл...

Как это исправить / решить / обойти?