Convert 3 li & ul tags data from one div id to other div id with change of text to those 3 converted

This is my Original code below:

<div id="cp_listed">
        <span><b>Title</b></span>
</div>

    <div class="bigright">
        <ul>
            <li id="cp_you_are" class=""><span>You are:</span> AAAA</li>
            <li id="cp_dept" class=""><span>Dept:</span> XXXX</li>
            <li id="cp_id_593" class=""><span>Section:</span> BBBB</li>
            <li id="cp_id_999" class=""><span>Area:</span> CCCC</li>
            <li id="cp_role" class=""><span>Role:</span> YYYY</li>
        </ul>
    </div>

HTML:

Original Output
Title
You are: AAAA
Dept: XXXX
Section: BBBB
Area: CCCC
Role: YYYY

Expected Code

 <div id="cp_listed">
      <span><b>Title</b></span>
            <div id="cp_you_are">
                <span><b>Posted by:</b></span> AAAA
            </div>
            <div id="cp_id_593">
                <span><b>Posted by:</b></span> BBBB
            </div>
              <div id="cp_id_999">
                <span><b>Posted by:</b></span> CCCC
            </div>
    </div>
    <div class="bigright">
        <ul>
            <li id="cp_dept" class=""><span>Dept:</span> XXXX</li>
            <li id="cp_role" class=""><span>Role:</span> YYYY</li>
      </ul>
    </div>

HTML:

Expected Output
Title Posted by: AAAA Posted by: BBBB Posted by: CCCC
Dept: XXXX
Role: YYYY

This is what i'm expecting to get. I want to extract or remove li & ul tags of #cp_you_are, #cp_id_593 & #cp_id_999 id's & shift those id's data into #cp_listed div tag by converting li & ul tags into div tags of those 3 id tags inside to the #cp_listed div tag as shown in Expected Code & Output.

Also its text must be changed from You are,Section & Area to Posted by to all 3 as shown in Expected Output. This must be done on immediate loading of the page without altering the code

Anyone plz helpme..

 

I'm stuck either way on trying to figure out why you want all that non-semantic markup and overuse of ID's and classes... In both cases you've got bold+span and/or div+bold+span doing a numbered heading's job, lists around unrelated items, bold around elements that likely shouldn't be a literary/grammatical bold... much less why would you do this type of processing client side?!?

I mean sure, it can be done with something akin to this (untested code, I'm on a crappy lappy right now)

(function(d) {

	var target = d.getElementById('cp_listed');
		
	function move(moveId) {
	
		var
			li = d.getElementById(moveID),
			m = e.firstChild,
			newDIV = d.createElement('div');
			
		newDIV.id = li.id;
		
		while (m) {
			newDIV.appendChild(m);
			m = m.nextSibling;
		}
		
		m = newDIV.getElementsByTagName('b');
		for (var t = 0; t < m.length; t++) {
			while (m.firstChild) m.removeChild(m.firstChild);
			m.appendChild(d.createTextNode('Posted By:'));
		}

		li.parentNode.removeChild(li);
		target.appendChild(newDIV);

	}
	
	move('cp_you_are');
	move('cp_id_593');
	move('cp_id_999');

})(document);

Code (markup):

Though again I'd be concerned with why you're doing this client-side in the first place. Also this would only work with fixed ID's -- not sure if that's an issue since you've got numbers in there... but if you're using id's like "cp_you_are" you're not using those more than once on a page, right?