JQuery converte stringa in oggetto nodo

Question

Voglio analizzare una stringa su un oggetto nodo. La seguente funzione dovrebbe fare qualcosa di simile:

Voglio ottenere un elemento di input, incorporato in un tag Li, in cui l'elemento di input può essere un pulsante di opzione o semplicemente un pulsante. Se il tipo è dato come radio, è necessario aggiungere un'etichetta.

Purtroppo, la parte:

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

fallisce.

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

Cordiali saluti,

Tobias

Answer 1

si sta cercando di aggiungere due elementi di un elemento DOM, e in realtà la creazione di una stringa. Basta aggiungere entrambi gli elementi al li. Hai taggato jQuery ma non ce n'è bisogno per quell'unica cosa.

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

È più pulito a che fare tutto questo con jQuery, ma quello che funziona meglio per voi.

---

Inoltre, i dati non sono un attributo, anche se vengono caricati come un caricamento a pagina. https://api.jquery.com/jquery.data/

Answer 2

So che sono un po 'in ritardo per la festa, ma anche questo mi ha confuso all'inizio. Il problema sembra essere che jQuery restituisce l'elemento analizzato in un array anche se c'è un solo elemento.

La soluzione consiste semplicemente nell'accedere all'elemento di array corretto.

Change

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

a

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