javascript - 使用 .append 和多行代码添加内容

Question

我正在创建一个表单。这是表单的代码:

 <form action="post_2.php" method="post" class="pure-form pure-form-stacked">
        <fieldset id="DoctorInfo">
 <legend><strong>Part Two</strong> - Doctor Information</legend>
        <h2>Primary Doctor</h2>
        <div class="pure-g-r">
            <div class="pure-u-1-3">
                <label for="doctorFirstName">Doctor First Name<span style="color: red">*</span></label>
                <input id="doctorFirstName" name="doctorFirstName" type="text" required>
            </div>

            <div class="pure-u-1-3">
                <label for="doctorLastName">Doctor Last Name<span style="color: red">*</span></label>
                <input id="doctorLastName" name="doctorLastName" type="text" required>
            </div>

            <div class="pure-u-1-3">
                <label for="establishmentName">Practice Name<span style="color: red">*</span></label>
                <input id="establishmentName" name="establishmentName" type="text" required>
            </div>

            <div class="pure-u-1-3">
                <label for="focusOfPractice">Type of Doctor<span style="color: red">*</span></label>
                <input id="focusOfPractice" name="focusOfPractice" type="text" value="Primary Care Giver" readonly>
            </div>

            <div class="pure-u-1-3">
                <label for="doctorPhone">Practice Phone Number<span style="color: red">*</span></label>
                <input id="doctorPhone" name="doctorPhone" type="tel" required>
            </div>
        </div>

        <div id="docList"></div>
        </fieldset>


        <fieldset id="confirm2">
            <div class="pure-g-r">  
                <div class="pure-u-1">
                <style scoped>

                .button-next,
                .button-cancel,
                .button-back,
                .button-add{
                    color: white;
                    border-radius: 4px;
                    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
                }

                .button-next {
                    background: rgb(28, 184, 65);
                }

                .button-cancel {
                    background: rgb(202, 60, 60);
                }

                .button-back {
                    background: rgb(223, 117, 20);
                }

                .button-add {
                    background: rgb(66, 184, 221);
                }


            </style>
                    <a href="index.html"><button type="button" class="button-cancel pure-button">Cancel</button></a>
                    <a><button type="button" onclick="history.back();" class="button-back pure-button">Back</button></a>
                    <button type="button" name="add" class="button-add pure-button" id="addDoc">Add Another</button>
                    <a href="signup_3.php"><button type="submit" name="next" class="button-next pure-button">Next</button></a>
                </div>
            </div>
        </fieldset>
        </form>

我还尝试使用 jQuery 的 .append() 函数使表单添加另一组输入字段。格式采用纯 CSS。

here is the jsfiddle

我知道这可能是多行错误，如果是这种情况，那么我可以转到问题的第二部分。您通常在 JavaScript 中输入什么来帮助撇号和括号意味着保留作为字符串的一部分而不是 chop 代码。例如:

 $(.this).append('<p>Tyler's dog says, "Woof"</p>');

请记住，我不是专业程序员，因为我知道所有术语以及您希望 CIT 中的人员知道的通常显而易见的事情。

Answer 1

JavaScript 中的字符串转义字符是反斜杠 \。 You can put a \ at the end of a line in a multi-line string in order to allow it to span multiple lines.您还可以使用 \ 在字符串内嵌入引号(由引号界定)。例如:

var myString = "My string\
has multiple lines\
and uses \"double quotes\" too!";

当 JavaScript 解析器在字符串中看到 \" 或 \' 时，它会被解释为引号字符而不是结束引号。要在字符串中获取实际的反斜杠您使用 \\ 的字符串。在行尾放置反斜杠是“转义”行尾字符，以便将其解释为文字字符而不是代码行的末尾。但是，删除所有换行符可能比在每行末尾添加反斜杠更容易!