嵌套document.write脚本失效：本地相册标签提交功能故障

Core Problem #

Using document.write to inject script tags directly causes browser parsing conflicts—your closing </script> tag inside the string gets misinterpreted as the end of the outer script, leaving the rest of the code as plain text at the bottom of the page.

Solution 1: Replace document.write with DOM Manipulation (Recommended) #

Skip raw HTML string writing entirely and build elements using native DOM APIs. This avoids parsing issues and is cleaner for dynamic content.

Example code for generating your tag correction form and its handler:

// Build the form element
const correctionForm = document.createElement('form');
correctionForm.id = 'tag-correction-form';
correctionForm.method = 'POST';
correctionForm.action = '/submit-tag-fix';

// Add form inputs
const tagField = document.createElement('input');
tagField.type = 'text';
tagField.name = 'corrected-tag';
tagField.placeholder = 'Enter corrected tag';

const submitBtn = document.createElement('button');
submitBtn.type = 'submit';
submitBtn.textContent = 'Submit Correction';

// Assemble the form
correctionForm.appendChild(tagField);
correctionForm.appendChild(submitBtn);

// Create and attach the form handler script
const formScript = document.createElement('script');
formScript.textContent = `
document.getElementById('tag-correction-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    // Add your submission logic here (e.g., fetch call to local server)
    fetch(this.action, {
        method: this.method,
        body: formData
    }).then(res => {
        res.ok ? alert('Correction submitted!') : alert('Submission failed.');
    });
});
`;

// Add everything to the page
document.body.appendChild(correctionForm);
document.body.appendChild(formScript);

Solution 2: Escape the Closing Script Tag (If You Need document.write) #

If you have to stick with document.write, split the closing </script> tag into a concatenated string so the browser doesn't parse it prematurely.

Example:

document.write(`
<form id="tag-correction-form" method="POST" action="/submit-tag-fix">
    <input type="text" name="corrected-tag" placeholder="Enter corrected tag">
    <button type="submit">Submit Correction</button>
</form>
<script>
document.getElementById('tag-correction-form').addEventListener('submit', function(e) {
    e.preventDefault();
    // Your submission logic here
});
<\/script> <!-- Escaped slash prevents premature closing -->
`);

The trick here is using <\/script> instead of </script> inside the document.write string—this tells the browser to treat it as part of the text content, not the end of the current script block.

Why These Work #

• DOM manipulation creates actual element nodes, so scripts added this way are executed normally without parsing conflicts.
• Escaping the closing script tag avoids the browser misinterpreting your string content as the end of the outer script.

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