我想将一个字符串解析为一个 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;
};
亲切的问候,
托比亚斯
最佳答案
您正试图将两个元素添加到一个 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/
关于javascript - JQuery 将字符串转换为节点对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30502169/