innerHTML заменить шаблон не работает

Question

Я видел много сообщений об этом шаблоне, но все еще не понимаю, почему он не работает в моем коде. Использование Chromium в Ubuntu 10.04.

function showDescription(){
    var description = document.createElement('div'),
    eventTarget = window.event.target,
    newHTML = description.innerHTML;

    description.id = 'description';

    switch(eventTarget.getAttribute('data-par')){
        case 'links': newHTML = newHTML.replace(newHTML, 'links')
            break;
        case 'images': newHTML = newHTML.replace(newHTML, 'images')
            break;
    };
    console.log(newHTML);
    parentElement.insertBefore(description, parentElement.firstChild.nextSibling);
};

    var descParLi = descPars.getElementsByTagName('li');
    for (var i = 0; i < descParLi.length; i++){
    descParLi[i].addEventListener("click", showDescription);
};

Этот код содержится в другой функции. Как ни странно, в консоли я вижу значение newHTML, но в html изменений нет, это проблема. Что случилось? Как исправить?

Answer 1

Вы не добавляете контент к фактическому div, который вы создали.

switch(eventTarget.getAttribute('data-par')){
    case 'links': description.innerHTML = 'links'
        break;
    case 'images': description.innerHTML = 'images'
        break;
};

console.log( description.innerHTML );

Нет смысла делать:

newHTML = description.innerHTML

... или:

newHTML.replace(newHTML, 'images')

... потому что description - это совершенно новый элемент, поэтому нет никакого содержимого innerHTML.

---

РЕДАКТИРОВАТЬ: Я использовал div вместо description для имени переменной выше. Вместо него следует использовать description:

description.innerHTML = 'xxxxx'

Исправлено.

Вот вся функция:

var i = 0;

function showDescription(){
    var description = document.createElement('div'),
    eventTarget = window.event.target;

    description.id = 'description' + i;  // <-- make the ID unique

    i++;  // <-- increment "i" so that it's different on the next run

    switch(eventTarget.getAttribute('data-par')){
        case 'links': description.innerHTML = 'links'
            break;
        case 'images': description.innerHTML = 'images'
            break;
    };
    console.log( description.innerHTML );

      // v----What is parentElement supposed to reference?
    parentElement.insertBefore(description, parentElement.firstChild.nextSibling);
}

Обратите внимание, что я добавил инкремент i, чтобы ваш идентификатор каждый раз был уникальным.

В этом нет необходимости, если вы удаляете элемент до показа другого.

Также у вас есть parentElement. Я не знаю, на что это должно ссылаться.

Если какая-то подходящая переменная не показана, то все в порядке, но если она должна быть ссылкой на родителя target, то вместо этого вам следует сделать следующее:

target.parentNode.insertBefore(description, target.parentNode.firstChild.nextSibling);

Answer 2

Кажется, вы на самом деле не сделали newHTML значением innerHTML, например:

description.innerHTML = newHTML;