Question

I have an HTML block:

<div style="text-align:left">
    <span>aaaaa</span>
    <span>bbbbb</span>
    <span>ccccc</span>
    <span>ddddd</span>
</div>

In my editor when I try to select this div I get only the spans selected but not the div. So my selection with this code is:

 sel = parent.document.getElementById('frame').contentWindow.document.getSelection();
 var range = sel.getRangeAt (0);
 var docFragment = range.cloneContents ();
 var tmpDiv = document.createElement ("div");
 tmpDiv.appendChild (docFragment);
 selHTML = tmpDiv.innerHTML;

so when I alert(selHTML) I get the code with the spans I wrote in the begging. But this HTML is wrapped by a div.
How can I get this div ?

I want that because I want to make a manually execCommand for aligment. Because in firefox I use the execCommand but is not working properly, as the selection is not done properly, and instead of change the text-align in the div I already have, it adds a new div.

Thanks in advance

Answer 1

I think you want outerHTML, which should include the div and all of its contents.

selHTML = tmpDiv.outerHTML;

Or

sel = parent.document.getElementById('frame')
  .contentWindow.document.getSelection();  

var range = sel.getRangeAt (0);  
var docFragment = range.cloneContents();  
var tmpDiv1 = document.createElement("div"); 
var tmpDiv2 = document.createElement('div'); 
tmpDiv2.appendChild (docFragment); 
tmpDiv1.appendChild(tmpDiv2); 
selHTML = tmpDiv1.innerHTML;