JQuery转换字符串到节点对象

JQuery convert string to Node Object

本文关键字：节点 对象 字符串 转换 JQuery      更新时间：2023-09-26

我想将字符串解析为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;
};

亲切的问候,

Tobias

您正在尝试向一个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来做这些更干净，但无论如何都是最适合你的。

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

我知道我来晚了一点，但这一开始也让我很困惑。问题似乎是，jQuery返回数组中解析的元素，即使只有一个元素。

解决方法就是访问正确的数组元素。

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


inputElement = $.parseHTML(this.getFullHtmlTextOf(inputElement) + labelElement)[0];
相关文章：