javascript - 在 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/ 。

您还可以在 http://hamzakhan.name/dev/eric/options_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++;
}

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