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

Question

我希望将一个字符串解析为节点对象。以下函数应该实现这样的功能：

我想获取嵌入在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;
};

亲切的问候，

托比亚斯

- Tobias S

---

你有什么问题？ - thodic

请参考以下链接，将字符串解析为节点对象：http://api.jquery.com/jquery.parsehtml/ - Parthipan S

问题在于，最后一个语句中，liElement附加其子元素失败，并显示“在'Node'上执行'appendChild'失败：参数1的类型不是'Node'。” - Tobias S

好的，我有解决方案了。我对重新分配的“inputElement = $.parseHTML(this.getFullHtmlTextOf(inputElement) + labelElement);”进行了注释，并没有直接附加inputElement，而是说“liElement.innerHTML = this.getFullHtmlTextOf(inputElement) + labelElement”。 - Tobias S

你的代码中混合了许多通用的DOM方法和jQuery，似乎没有明确的逻辑来决定何时使用其中之一。这会在未来让你（和其他人）感到困惑。选择一个模式并坚持下去。我强烈建议不要使用setAttribute('onclick'...来添加事件处理程序。使用jQuery的on()方法或DOM的addEventListener方法。 - Heretic Monkey

Answer 1

我知道我来晚了，但一开始这也让我感到困惑。问题似乎在于，即使只有一个元素，jQuery也会返回解析后的元素数组。

解决方案很简单，只需访问正确的数组元素即可。

更改

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

到

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

- dlsso

Answer 2

你正在尝试将两个元素添加到一个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/

- Popnoodles