动态添加HTML表单

Question

我试图在sharing.html中对这个表单进行编码，这样当你输入信息并想要添加更多联系人时，他们可以点击“添加另一个联系人”，但是当我试图写出代码时，我使用的dreamweaver说Javascript中有一个错误。我不知道如何修复这个错误：(脚本几乎在底部)

    <div class="recordsbox">
            <h1>Sharing Center</h1>
            <p>Please enter the contact information that you want to share.</p>
            <div id="shareform">
            <form id="share" method="POST">
                 <div class="notifyfield">
                <label>Who is this person?</label>
                <input type="text">
                </div>
                <div class="notifyfield">
                <label>Email Address:</label>
                <input type="email" >
                </div>
                <div class="notifyfield">
                <label>Phone Number:</label>
                <input type="tel" >
                </div>
            </form>
            </div>
            <div class="addcontact">
                <input type="button" value="Add another contact?" onClick="addForm('shareform');">
            </div>
            <script>
            var shareform = 0; 
                function addForm(divName) {
                    shareform++;
                    var newform = document.createElement('div');
                    newform.innerHTML = '<div id="shareform'+shareform+'">
            <form id="share" method="POST">
                 <div class="notifyfield">
                <label>Who is this person?</label>
                <input type="text">
                </div>
                <div class="notifyfield">
                <label>Email Address:</label>
                <input type="email" >
                </div>
                <div class="notifyfield">
                <label>Phone Number:</label>
                <input type="tel" >
                </div>
            </form>
            </div>
';
                    document.getElementById(divName).appendChild(newform);
                    shareform++;
                }
            </script>
            <div class="nextbutton">
            <a href="#">Next</a>
            </div>
        </div>

我基于该教程：http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/编写了这段代码。

此外，您还可以在innerpage/sharing.html查看完整的代码。

为了更快地看一看，下面是正在讨论的脚本：

    <script>
            var shareform = 0; 
                function addForm(divName) {
                    shareform++;
                    var newform = document.createElement('div');
                    newform.innerHTML = '<div id="shareform'+shareform+'">
            <form id="share" method="POST">
                 <div class="notifyfield">
                <label>Who is this person?</label>
                <input type="text">
                </div>
                <div class="notifyfield">
                <label>Email Address:</label>
                <input type="email" >
                </div>
                <div class="notifyfield">
                <label>Phone Number:</label>
                <input type="tel" >
                </div>
            </form>
            </div>
';
                    document.getElementById(divName).appendChild(newform);
                    shareform++;
                }
            </script>

Answer 1

以下是新代码：

var shareform = 0; 
function addForm(divName) {
  shareform++;
  var newform = document.createElement('div');
  newform.innerHTML = '<div id="shareform'+shareform+'"><form id="share" method="POST"><div class="notifyfield2"><div class="sharefield"><label>Who is this person?</label><input type="text"></div></div><div class="notifyfield"><label>Email Address:</label><input type="email" ></div><div class="notifyfield"><label>Phone Number:</label><input type="tel" ></div></form><hr class="greenline"></div>';
  document.getElementById(divName).appendChild(newform);
  shareform++;
}

你需要删除所有看不见的字符。你不能“换行符”字符串。