如何通过jQuery将HTML列表数据转换为XML并弹窗展示？

Got it, let's work through this problem together. You want to turn the key-value pairs from your HTML list into XML, then show that XML in a modal when a button is clicked. Here's a complete, working solution that builds on your existing code:

Full HTML Structure #

First, let's finish your truncated HTML and add the necessary button and modal elements:

<ul id="list">
  <li>
    <span class="name name-block">Hello</span>
    <span>=</span>
    <span class="name value-block">World</span>
    <span class="btn delete">Delete</span>
  </li>
  <li>
    <span class="name name-block">Happy</span>
    <span>=</span>
    <span class="name value-block">Coding</span>
    <span class="btn delete">Delete</span>
  </li>
  <!-- Add more dynamic list items here later if needed -->
</ul>

<button id="generateXmlBtn">Generate XML</button>

<!-- Modal to display XML -->
<div id="xmlModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h3>Generated XML</h3>
    <pre id="xmlOutput"></pre>
  </div>
</div>

Basic Styling (CSS) #

Add this CSS to make the modal functional and the list look clean:

/* Modal base styles */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover {
  color: black;
}

pre {
  background-color: #f4f4f4;
  padding: 15px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Optional list styling */
#list li {
  margin: 10px 0;
  padding: 8px;
  border: 1px solid #ddd;
  list-style: none;
}

.btn.delete {
  margin-left: 10px;
  color: red;
  cursor: pointer;
}

JavaScript Logic (Core Functionality) #

This code handles XML generation, modal control, and escaping special characters to keep XML valid:

// Grab DOM elements
const generateBtn = document.getElementById('generateXmlBtn');
const xmlModal = document.getElementById('xmlModal');
const closeBtn = document.querySelector('.close');
const xmlOutput = document.getElementById('xmlOutput');
const list = document.getElementById('list');

// Generate XML from list items
function generateXml() {
  let xml = '<data>\n';
  
  // Loop through each list item
  list.querySelectorAll('li').forEach(item => {
    const name = item.querySelector('.name-block').textContent.trim();
    const value = item.querySelector('.value-block').textContent.trim();
    
    // Build XML nodes for each key-value pair
    xml += `  <item>\n`;
    xml += `    <name>${escapeXml(name)}</name>\n`;
    xml += `    <value>${escapeXml(value)}</value>\n`;
    xml += `  </item>\n`;
  });
  
  xml += '</data>';
  return xml;
}

// Helper to escape XML special characters (critical for validity!)
function escapeXml(str) {
  return str.replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&apos;');
}

// Open modal and show XML when button is clicked
generateBtn.addEventListener('click', () => {
  const xml = generateXml();
  xmlOutput.textContent = xml;
  xmlModal.style.display = 'block';
});

// Close modal via X button
closeBtn.addEventListener('click', () => {
  xmlModal.style.display = 'none';
});

// Close modal when clicking outside the content
window.addEventListener('click', (e) => {
  if (e.target === xmlModal) {
    xmlModal.style.display = 'none';
  }
});

Key Details: #

• XML Validity: The escapeXml function ensures characters like <, &, or quotes don't break the XML structure.
• Dynamic Support: If you add new list items dynamically (e.g., with an "Add Item" button), the code will automatically include them when generating XML.
• Customizable Structure: You can tweak the XML wrapper (currently <data>) or item nodes to match your required schema.

内容的提问来源于stack exchange，提问作者MontyGoldy