Aggiungere dinamicamente oggetti a una pagina HTML in JavaScript

Per aggiungere dinamicamente oggetti a una pagina HTML si possono usare le istruzioni createElement.

Ad esempio se voglio creare dinamicamente il seguente codice html:

HTMLCopia

<div>Prova: <input type="button" value="OK" onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, 'test1')" /></div>

devo scrivere:

JavaScriptCopia

var htmlElement = document.createElement('div');

var lbl = document.createTextNode('Prova: ');
htmlElement.appendChild(lbl);

var btnOK = document.createElement('input');
btnOK.setAttribute("type", "button");
btnOK.value = "OK";
btnOK.setAttribute("onclick","SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, 'test1')");
htmlElement.appendChild(btnOK);

e poi, ad esempio, aprire una popup SharePoint 2010 con l'html generato:

JavaScriptCopia

var options = { 
  title: 'prova',
  html: htmlElement,
  width: 700,
  height: 700,
  showClose: true,
  dialogReturnValueCallback: function(dialogResult, returnValue) {
    if (dialogResult == SP.UI.DialogResult.OK) {
      alert(returnValue);
    }  
  }   
};   
SP.UI.ModalDialog.showModalDialog(options); 

in alternativa posso usare jQuery con una stringa che rappresenta l'HTML

JavaScriptCopia

var template = $('<div>Prova: <input type="button" value="OK" onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, \'test1\')" /></div>');
var htmlElement = template[0]

oppure, sempre con jQuery, creo un template dell'HTML nascosto all'interno della pagina

HTMLCopia

<div id="popup-template" style="display:none;">
  <div>
    Text to search: <input type="text" id="popup-search-text" style="width: 100px" /> <input type="button" value="search" onclick="popupDoSearch()" />
  </div>
	
  <div id="popup-search-results"></div>		
</div >

e successivamente lo recupero in JavaScript

JavaScriptCopia

var popupTemplate = $("#popup-template").clone().show();
htmlElement = popupTemplate[0];

var options = { 
  title: 'prova',
  html: htmlElement,
  width: 700,
  height: 700,
  showClose: true,
  dialogReturnValueCallback: function(dialogResult, returnValue) {
    if (dialogResult == SP.UI.DialogResult.OK) {
      alert(returnValue);
    }  
  }   
}; 

quindi, recupero il template, lo clono per avere una copia e rendo la copia visibile.