javascript - JQuery 将字符串转换为节点对象

Question

我想将一个字符串解析为一个 Node 对象。下面的函数应该做这样的事情:

我想获得一个嵌入在 li 标签中的输入元素，输入元素可以是单选按钮或只是一个按钮。如果类型为单选，则必须添加标签。

不幸的是，部分:

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/