JQuery将字符串转换为Node Object

Question

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

我想得到一个嵌入在li-tag中的input-element,其中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);
}
...

工作演示

使用 jQuery 来完成所有这些工作会更干净，但无论哪种方式最适合您。

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