For my project, I am attempting to dynamically load e-book chapter pages using ajax requests. Here is an example of the HTML markup I am working with:
<html><body>
<div id="p5">
<div id="p6">
<p class="heading">heading1</p>
<p class="normal">This is my sample text here</p>
</div></div>
</body>
</html>
After loading the book, I have all the pages in "pageContent". I want to replace all paragraphs in the book with textareas of the same height and width as before. Here is what I tried:
$(pageContent).find('p').empty().html('<textarea type="text"></textarea>')
This gave me a textarea with the same height and width as the paragraph element, but I actually need it to match its first parent:
<div id="p6">
Since I don't have a class for this div element and the IDs are unique for each page, I'm unsure how to proceed. I need something like this:
<html><body><textarea id="p6" type="text"></textarea></html></body>
How can I assign the parent's ID to my textarea and remove the div element? If you have any suggestions, please leave a comment. Thank you in advance for your help.