javascript - insideHTML 替换模式不起作用

Question

我看到了很多关于这种模式的帖子，但仍然不明白为什么它在我的代码中不起作用。在 Ubuntu 10.04 上使用 Chromium。

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，以便您的 ID 每次都是唯一的。

如果您要在显示另一个元素之前删除该元素，则无需执行此操作。

此外，您还有一个 parentElement。我不知道这应该引用什么。

如果未显示某个适当的变量，那么就可以了，但如果它应该是对目标的父级的引用，那么您应该这样做:

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