Замена подстроки в строке (можно ли динамически)

<div class="news" id="news">
</div>
<script>
    // каждый элемент описан темя свойствами: собственно сам контент,
    // функция - уникальный для каждого элемента функционал, который должен выполняться при клике на кнопку
    // opened - признак открыт элемент или закрыт - это для демонстрации как взаимодействовать с массивом
    var data = [
        {
            html: '<p>Item 1</p><button class="knop"> kn_1 </button><a href="javascript:void(0);" class="txt"> close </a><p>...</p>',
            handler: function () {
                console.log('echo 1');
            },
            opened: true
 
        },
        {
            html: '<p>Item 2</p><button class="knop"> kn_2 </button><a href="javascript:void(0);" class="txt"> close </a><p>...</p>',
            handler: function () {
                console.log('echo 2');
            },
            opened: false
        },
        {
            html: '<p>Item 3</p><button class="knop"> kn_3 </button><a href="javascript:void(0);" class="txt"> close </a><p>...</p>',
            handler: function () {
                console.log('echo 3');
            },
            opened: false
        }
    ];
    const box = document.getElementById('news');
    // храним индекс в массиве открытого элемента
    var currentIndex = -1;
 
    // определяем следующий элемент
    const getNextIndex = function () {
        let index;
        if (currentIndex == -1) {
            index = 0;
 
        } else {
            index = currentIndex + 1;
            if (index >= data.length) {
                index = 0;
            }
        }
        return index;
    }
 
    // Вынес в отдельную функцию специально, именно ее достаточно будет изменить
    // для другого метода работы с контентом (например  шаблон как в приведенном выше решении)
    const replaceContent = function (index) {
        box.innerHTML = data[index].html;
    }
 
    // функция отображения элемента
    // а так же меням флаги открыт/закрыт в массиве для предыдущего и новго текущего элемента
    const drawNext = function () {
        let index = getNextIndex();
        if (index >= 0 && index < data.length) {
            replaceContent(index);
            if (currentIndex !== index) {
                if(currentIndex >= 0) {
                    data[currentIndex].opened = false;
                }
                currentIndex = index;
                data[currentIndex].opened = true;
            }
        }
    }
    // первая инициализация - показываем первый элемент при открытии страницы
    drawNext();
    // вешаем обработчик кликов на сам блок, внутрь которого будем добавлять динамически элементы
    box.addEventListener('click', function (event) {
        // проверям не нажата ли кнопка
        if (event.target.classList.contains('knop')) {
            // вызываем уникальный для элемента функционал
            data[currentIndex].handler();
            // выводим следующий
            drawNext();
        }
        // проверяем не нажата ли ссылка закрытия
        else if (event.target.classList.contains('txt')) {
            box.innerHTML = '';
        }
    });
</script>