使用.append添加内容并添加多行代码

debugcn 发表于 Dev

Lazenbyt-mher主席

我有一个正在创建的表格。这是表格的代码：

 <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中进行的。

这是jsfiddle

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

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

请记住，我不是专业的程序员，因为我知道所有术语，而且您希望CIT的某些人知道这些通常很明显的事情。

DaoWen

JavaScript中的字符串转义字符是反斜杠\。您可以将a\放在多行字符串的行末，以使其跨多行。您还可以\用于将引号嵌入字符串（由引号表示）中。例如：

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。