Al4ddin2
asked on
How to disect a chunk of HTML and maintain the data
In my HTML I have a list.
The list contains items that the user can select and 'add' to their own container. So each list item has a button, when the button is clicked at the moment it clones the HTML and adds it into their container HTML div.
Is there a way that I can still capture all the data in that HTML snippet but not clone the HTML exactly? I would like it to appear differently.
The for example I would like it to end up looking something like this:
The list contains items that the user can select and 'add' to their own container. So each list item has a button, when the button is clicked at the moment it clones the HTML and adds it into their container HTML div.
Is there a way that I can still capture all the data in that HTML snippet but not clone the HTML exactly? I would like it to appear differently.
<li><div class="item itemContainer" >
<div class="itemId">123</div>
<div class="itemTitle">Title 1</div>
<div class="itemContributor">Test Name</div>
</div>
<div class="item pageNum">6</div>
<div class="item itemSelection" ><div class="previewItem"><input type="button" value="Preview" class="previewBtn"></div>
<div class="addToMe"><input type="button" value="ADD >" id="addToMe" class="addToMeBtn"></div>
</div>
<div class="imagePreview hide"><img src="/image.gif"></div>
</li>
The for example I would like it to end up looking something like this:
<li class="">
<div class="item pageNum" title="">6</div>
<div class="item itemContainer" >123</div>
<div class="itemInfo">
<span class="itemTitle">Title 1</span>
<span class="itemContributor">Test Name</span>
</div>
</div>
<div class="item handle" title="">
<span class="ui-icon ui-icon-carat-2-n-s"></span>
</div>
<div class="item">
<input type="button" value="remove" />
</div>
</li>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
CODE:
http://jsbin.com/wevaz/1/edit?html,js,output
javascript
Open in new window
html
Open in new window