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

Posted 2023-05-07

【中文标题】JQuery 将字符串转换为节点对象

【英文标题】：JQuery convert string to Node Object

【发布时间】：2015-08-10 16:51:10

【问题描述】：

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

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

不幸的是，部分：

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;
;

亲切的问候，

托比亚斯

【问题讨论】：

你的问题是？

请参考以下链接将字符串解析为节点对象api.jquery.com/jquery.parsehtml

问题是，liElement 附加他的孩子的最后一条语句失败并显示“无法在 'Node' 上执行 'appendChild'：参数 1 不是 'Node' 类型。”

好的，我有一个解决方案。我评论了重新分配“inputElement = $.parseHTML(this.getFullHtmlTextOf(inputElement) + labelElement);”并且不要直接附加 inputElement，而是说“liElement.innerHTML = this.getFullHtmlTextOf(inputElement) + labelElement”

您已经完全混合了一般 DOM 方法和 jQuery，在使用其中一种方法之间似乎没有什么逻辑。这将使您（和其他人）在未来感到困惑。选择一个模式，然后就可以了。我肯定会建议 not 使用setAttribute('onclick'... 添加事件处理程序。使用 jQuery 的 on() 方法或 DOM 的 addEventListener 方法。

【参考方案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/

【参考方案2】：

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

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

改变

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

到

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