Question

我试图创建将HTML元素作为字符串返回给我的函数，这样我最终可以将它们附加到DOM并将它们传递给我的函数。我有段落，标题和div工作，但不能为我的生活似乎得到工作的链接。

这是不起作用的codepen

有问题的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;
}

很长一段时间给了我错误，但只有从link函数调用它时才会出错。我试着在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'));

Answer 1

您的[0]是一个字符串。你应该使用DOM并操纵它的属性

let target = <a href="#"></a>;

Answer 2

你忘了用bling包装一个标签：

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);
}

Answer 3

您的createDiv函数按预期工作并且您的link函数不是因为您没有包装html元素的表示形式（您传递给{{1}的元素）的原因}}在jQuery包装器中，就像在addStyles函数中一样。请参阅下面的代码，了解我为改变它而工作的内容：

createDiv

codepen

我实际上有点迷失为什么我们需要将function link(href,text,css){ let target = `<a href="${href}">${text}</a>`; if(css == null ){ return target; } return addStyles($(target)[0],css); }添加到[0]，但我们确实如此。也许其他人可以说明为什么$(target)而不是<a href="${href}">${text}</a>

的情况

修改：忽略上述<div></div>，并查看对此答案的评论。

字符串文字未附加到DOM

3 个答案: