从外部JS文件调用HTML内容

I'm having an issue with what seems like a simple enough task. I have a web page where I need to load in and remove div content as the user clicks buttons. My code doesn't seem to work though.

我遇到了一个看似简单的任务的问题。我有一个网页,我需要加载并删除div内容,因为用户点击按钮。我的代码似乎不起作用。

The html:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Main Page</title>
    <link rel="stylesheet" href="assets/css/stylemain.css"/>

    <script src="assets/js/introduction.js"></script>

</head>

<body>

    <div id="container">   
        <div id="content">
            <div id="slide1">
                <p>Here is the first trigger. It should look something like this</p>
                <p><input type="button" onclick="part2()" value="Click Me!" /></p>
            </div>        
        </div>

and the .js file:

和.js文件:

function part2() {
    document.write("<div id="slide2">
                    <p>Here is the second trigger. It should be to the left</p>
                    <p>next line goes here</p>
                    </div>")
    }

It's coming up with a syntax error on line 2 of the js file (the document.write line) but I can't figure out why. I tried it both with and without quotations but to no avail. Any help would be appreciated.

它在js文件的第2行(document.write行)出现了语法错误,但我无法弄清楚原因。无论引用和不引用我都试过但无济于事。任何帮助,将不胜感激。

2 个解决方案

#1

A slightly cleaner solution is to use a combination of single quotes and double quotes:

一个稍微清洁的解决方案是使用单引号和双引号的组合:

function part2() {
    document.write('\
      <div id="slide2">\
        <p>Here is the second trigger. It should be to the left</p>\
        <p>next line goes here</p>\
      </div>'
    );
}

Note that if you want to use a string broken into multiple lines you must add the '\' in the end of each line to let JS parser know the string continues to the next line.

请注意,如果要使用分成多行的字符串,则必须在每行的末尾添加“\”,以使JS解析器知道字符串继续到下一行。

#2

You have to escape the quotes:

你必须逃避报价:

function part2() {
    document.write("<div id=\"slide2\">\n<p>Here is the second trigger. It should be to the left</p>\n<p>next line goes here</p>\n</div>");
}

#1