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

时间:2014-06-02 23:03:14

标签: javascript jquery append

我有一个我要创建的表单。这是表单的代码:

 <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()函数使表单添加另一组输入字段。格式化在Pure-CSS中。

here is the jsfiddle

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

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

请记住,我不是一名专业的程序员,因为我知道所有的行话,而且你会期望CIT中的某些人知道明显的事情。

2 个答案:

答案 0 :(得分:2)

如果你的意思是你也想在字符串中使用撇号字符,你可以使用\&#39;把撇号放在由撇号分隔的字符串中:

示例:

var quote_str = '\'<p>Tyler's dog says, "Woof"</p>\'';

使用:

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

关于您的问题,您可以添加其他字段和输入。但您必须删除

之间的所有空格
$(.this).append(<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>);

如果您没有删除空格,则会出现意外的非法令牌javascript&#34;错误。

此外,您应该使用反斜杠添加字符串转义字符:。

示例:

var string = "Hello \
Second string \
third line..";

答案 1 :(得分:2)

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解析器在字符串中看到\"\'时,它将被解释为引号字符而不是结束引号。要在字符串中获得实际反斜杠,请使用\\。在行尾添加反斜杠是“转义”行尾字符,以便将其解释为文字字符而不是代码行的结尾。但是,删除所有换行符可能更容易,而不是在每行的末尾添加反斜杠!