Uncaught SyntaxError: Unexpected end of input while writing HTML into javascript string [closed]-CodePudding

I have this error:

Uncaught SyntaxError: Unexpected end of input

This error occurs when i want to write a html document in JavaScript string type, Here is my code:


    let html = `
                <!DOCTYPE html>
                <html lang="en">
                    <head>
                        ${document.head.innerHTML}
                    </head>
                    <body>
                        <div>
                            <ul>${myList.innerHTML}</ul>
                        </div>
                    </body>
                </html>
                `;

Somewhere else in the code:

<ul id="myList">
   <li>Item 1</li>
   <li>Item 2</li>
   ...
</ul>

And when i remove the html tag and its base tags like head and body in the string, it's running with no error, I even tried with all string definer formats like "" and '' but the problem seems to be from HTML base tags.

Note:

In this case i need the whole of HTML document.

Thanks for any help :).

CodePudding user response：

Check your innerHTML tags. I think those innerHTML tags already have the base tags inside them.

Also use

$(head.innerHTML)

instead of

${$.head.innerHTML}

CodePudding user response：

Normally you should add single quotes to every line and followed by a sign at the end of each line when passing multi-line strings, so I’ll have to assume you want to preserve the formatting you have here... in which case you should encapsulate the string with the PRE tags.

let html ='<pre>

        <!DOCTYPE html>
        <html lang="en">
            <head>
                ${$.head.innerHTML}
            </head>
            <body>
                <div class="list">
                    <h4>List:</h4>
                    <ul id="myList">${myList.innerHTML}</ul>
                </div>
            </body>
        </html>

        </pre>';