未将字符串文本附加到DOM

String literal not being appended to DOM

本文关键字：DOM 文本 字符串      更新时间：2024-06-14

我正在尝试制作函数，将HTML元素作为字符串返回给我，这样我最终可以将它们附加到DOM中，并在函数中传递它们。我有段落、标题和div的工作，但在我的一生中似乎无法获得工作链接。

这是不工作的代码笔

有问题的javascript是：

function link(href,text,css){
    let target = `<a href="#"></a>`;
    if(css == null ){
        return target;
    }
    return addStyles(target,css);
}

我的addStyles函数是：

function addStyles(target,css){
    if(css == null ){
        return target;
    }
    let props = Object.keys(css);
    props.forEach((prop)=>{
        switch(prop){
            case 'id':
                $(target).attr('id', css[prop]);
                break;
            case 'class':
                let classes = css[prop];
                if(Array.isArray(css[prop])){
                    classes = css[prop].toString().replace(',', ' ');
                } 
                $(target).addClass(classes);
                break;
            default:
                $(target).attr('data-name', 'Timi');
        }
    });
    return target;
}

在很长一段时间内，它给了我错误，但只有在从CCD_ 1函数调用它时。我试着在href中进行编码，看看我的字符串文字是否会给我带来错误，但仍然无济于事。

当从这个函数调用它时，它可以完美地运行

function createDiv(css){
    let newDiv = $(div);
    return addStyles(newDiv,css);
}

我说addStyles函数有效，我认为是link()给我带来了问题，因为createDiv有效，并用这些调用附加DOM

app.append(createDiv({id: 'testing'}));
app.append(createDiv({class: ['bar', 'snuff']}));
app.append(createDiv()).append(createDiv({class: 'timi'})).append(paragraph('Hey guys!'));
$('#testing').append(heading(1,'Hello'));

您的let target = <a href="#"></a>;是一个字符串。您应该使用DOM并操作其属性，而不是

function link(href,text,css){
    let target = document.createElement('a');
    let linkText = document.createTextNode(text);
    target.appendChild(linkText);
    target.href = href;
    if(css == null ){
        return target;
    }
    return addStyles(target,css);
}

您忘记用bling:包装a标签

let target = $(`<a href="#"></a>`);

createDiv函数按预期工作，而link函数不按预期工作的原因是，您没有像在createDiv函数中那样将html元素（传递给addStyles的元素）的表示形式封装在jQuery包装器中。请参阅我下面的代码，了解我为使其工作所做的更改：

function link(href,text,css){
    let target = `<a href="${href}">${text}</a>`;
    if(css == null ){
        return target;
    }
    return addStyles($(target)[0],css);
}

代码笔

实际上，我有点不明白为什么我们需要将[0]添加到$(target)中，但我们确实添加了。也许其他人可以插话解释为什么link0是这样，而<div></div> 不是这样

编辑：忽略上面关于[0]的内容，并查看对此答案的评论。

相关文章：