Question

我在理论上创建了一个表单，用户可以单击按钮将一组表单选项附加到div。问题是，当我点击按钮时，绝对没有（至少从我能看到的）发生。

我的HTML如下：

<form method="post" action="">
    ...

    <div class="tab-pane" id="rules">
        <div class="row">
            <button onclick="addRule()" class="btn btn-primary btn-block">Add New Rule</button><br />
        </div>
    </div>
</form>

我的Javascript如下：

<script>
    function addRule(){
        var theDiv = document.getElementById("rules");
        var content = document.createTextNode('<div class="row">
            <div class="col-md-4">
                <select class="form-control mb15" name="arule[]">
                    <option value="firstname">Firstname</option>
                    <option value="lastname">Lastname</option>
                    <option value="email">Email Address</option>
                    <option value="gender">Gender</option>
                    <option value="dob">Date of Birth</option>
                    <option value="group">Group</option>
                    <option value="custom1">Custom 1</option>
                    <option value="custom2">Custom 2</option>
                    <option value="custom3">Custom 3</option>
                    <option value="custom4">Custom 4</option>
                    <option value="custom5">Custom 5</option>
                </select>
            </div>
            <div class="col-md-4">
                <select class="form-control mb15" name="brule[]">
                    <option value="is">is</option>
                    <option value="contains">contains</option>
                </select>
            </div>
            <div class="col-md-4">
                <input type="text" class="form-control" name="crule[]">
            </div>
        </div>');
        theDiv.appendChild(content);
    }
</script>

我的网站使用Bootstrap和以下jQuery脚本：

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.min.js"></script>
<script src="js/jquery.sparkline.min.js"></script>
<script src="js/toggles.min.js"></script>
<script src="js/retina.min.js"></script>
<script src="js/jquery.cookies.js"></script>
<script src="js/jquery.autogrow-textarea.js"></script>
<script src="js/bootstrap-fileupload.min.js"></script>
<script src="js/bootstrap-timepicker.min.js"></script>
<script src="js/jquery.maskedinput.min.js"></script>
<script src="js/jquery.tagsinput.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/chosen.jquery.min.js"></script>
<script src="js/dropzone.min.js"></script>
<script src="js/colorpicker.js"></script>
<script src="js/custom.js"></script>
<script>
    jQuery(window).load(function(){
        var container = document.querySelector('#bloglist');
        var msnry = new Masonry( container, {
            // options
            columnWidth: '.col-xs-6',
            itemSelector: '.col-xs-6'
        });

    });
    jQuery(document).ready(function(){
        jQuery(".date").mask("99/99/9999 @ 99:99");
    });
</script>

我也尝试使用以下按钮：

<input type="submit" onclick="addRule()" value="Add New Rule" /><br />

如果有人知道为什么这不做任何事情，我会非常感谢一些反馈。感谢。

Answer 1

您正在使用多行字符串。使用\转义换行符号

使用

var content = document.createTextNode('<div class="row"> \
</div>');

部分代码：

var content = document.createTextNode('<div class="row">
</div>');

OR

使用简单的字符串连接，如

var content = document.createTextNode('<div class="row">'
+ '</div>');

Answer 2

如果你已经在使用jQuery，我真的建议你使用jQuery方法添加DOM元素。这是一个例子：

var rowDiv = $(document.createElement("div")).attr({class:"row"});
$("#rules").append(rowDiv);

任何熟悉jQuery的人都可以阅读这篇文章，它可以更好地控制你的DOM构建。它也不那么令人困惑，因为你没有一个非常难以阅读的巨大魔法字符串，而是一个更加面向对象的方法。

调用函数将文本附加到div不会有任何作用

2 个答案: