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的父级的引用，那么你应该这样做：

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

Answer 2

看来你实际上并没有将newHTML作为innerHTML的值，如下所示：

description.innerHTML = newHTML;

innerHTML替换模式不起作用

2 个答案: