JQuery convert string to Node Object

Question

I want to parse a string for a Node object. The following function should do something like this:

I want to get an input element built into the li tag, in which the input element can be a radio button or just a button. If the type is specified as a radio, you must add a shortcut.

Unfortunately, the part:

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

not executed.

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

Yours faithfully,

Tobias

Answer 1

You are trying to add two elements to one DOM element and actually create a string. Just add both elements to li. You marked jQuery but no need for this.

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

It's cleaner to do it all with jQuery, but whatever works best for you.

---

In addition, data is not an attribute, even if it is displayed as one on the download page. https://api.jquery.com/jquery.data/

Answer 2

I know I'm a little late for the party, but that also bothered me. The problem is that jQuery returns the parsed element in the array, even if there is only one element.

The solution is to simply access the correct element in the array.

Edit

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

to

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