Question

我想将字符串解析为Node对象。以下函数应该执行以下操作：

我想获得一个嵌入在li-tag中的input元素，其中input-element可以是单选按钮，也可以只是一个按钮。如果类型以无线电形式给出，则必须添加标签。

不幸的是，部分：

inputElement = $.parseHTML(this.getFullHtmlTextOf(inputElement) + labelElement);

失败。

this.getKeyValAsInputInLiWithType = function (key, val, isArgument, type, isChecked) {
    var liElement, inputElement, labelElement;
    liElement = document.createElement('li');
    liElement.setAttribute('id', 'li_' + key);

    inputElement = document.createElement('input');
    inputElement.setAttribute('id', key);
    inputElement.setAttribute('type', type);
    inputElement.setAttribute('value', val);
    inputElement.setAttribute('data-dismiss', 'modal');

    // additional attributes for a button
    if (type === 'button') {
        inputElement.setAttribute('class', 'button button-block btn btn-primary btn-default btn-discussion');
    }

    // additional attributes for a radio button
    if (type === 'radio') {
        if (isChecked) {
            inputElement.setAttribute('checked', '');
        }
        // adding label for the value
        labelElement = '\<label for="' + key + '"\>' + val + '\</label\>';
        inputElement = $.parseHTML(this.getFullHtmlTextOf(inputElement) + labelElement);
    }

    if (key === addStatementButtonId) {
        inputElement.setAttribute('onclick', "$('#'+addArgumentContainerId).show();$('#'+addStatementButtonId).disable = true;");
    } else if (type === 'button') {
        if (isArgument) {
            inputElement.setAttribute('onclick', "new InteractionHandler().argumentButtonWasClicked(this.id, this.value);");
        } else {
            inputElement.setAttribute('onclick', "new InteractionHandler().positionButtonWasClicked(this.id, this.value);");
        }
    }
    alert(this.getFullHtmlTextOf(inputElement));

    liElement.appendChild(inputElement);
    return liElement;
};

亲切的问候，

托拜厄斯

Answer 1

您正在尝试向一个DOM元素添加两个元素，并实际创建一个字符串。只需将两个元素附加到li即可。你已经标记了jQuery，但是没有必要为它做这件事。

...
inputElement.setAttribute('data-dismiss', 'modal');

// now append inputElement
liElement.appendChild(inputElement);

...

if (type === 'radio') {
    ...
    // lose this // labelElement = '\<label for="' + key + '"\>' + val + '\</label\>';
    // this will just produce a string even if it worked // inputElement = $.parseHTML(this.getFullHtmlTextOf(inputElement) + labelElement);

    labelElement = document.createElement('label');
    labelElement.setAttribute('for', key);
    labelElement.innerHTML = val;
    liElement.appendChild(labelElement);
}
...

Working demo

使用jQuery完成所有这些操作更简洁，但无论哪种方式最适合您。

此外，数据不是属性，即使它在页面加载时呈现为一个属性。 https://api.jquery.com/jquery.data/

Answer 2

我知道我参加派对有点晚了，但这让我起初感到困惑。问题似乎是jQuery返回数组中的解析元素，即使只有一个元素。

解决方案只是访问正确的数组元素。

更改

inputElement = $.parseHTML(this.getFullHtmlTextOf(inputElement) + labelElement);

到

inputElement = $.parseHTML(this.getFullHtmlTextOf(inputElement) + labelElement)[0];

JQuery将字符串转换为Node Object

2 个答案: