Javascript jQuery替换函数没有替换有效HTML中的文本？

我试图替换html字符串中的一些文本，但它抛出

uncaughttypeerror:无法读取未定义的属性“replace”

error

var formHtml = ($('#cx-record-answer-form-div .'+$('#cx-user-survey-questions-record-edit').find('#answer_type').val()).html());

在控制台中，当我记录

formHtml

变量时，它表示

formData

未定义，但当我从上述代码末尾删除

.html（）

时，它返回有效的html。但是replace函数仍然抛出了未定义的错误

JS:

var $addAnswerButton = $('#add-answer-button');
var newAnswerFormIndex =  0;

$addAnswerButton.on('click', function() {
    newAnswerFormIndex++;

    if($.trim($('#cx-user-survey-questions-record-edit').find('#answer_type').val()) != ''){
        // get form html
        var formHtml = ($('#cx-record-answer-form-div .'+$('#cx-user-survey-questions-record-edit').find('#answer_type').val()).html());
        console.log(formHtml);
        var appendFormHtml = formHtml.replace('cx-record-answer-form-<#id#>','cx-record-answer-form-new-'+newAnswerFormIndex);
        console.log(appendFormHtml);

        appendFormHtml = appendFormHtml.replace(/\<#id#>/g,newAnswerFormIndex);
        appendFormHtml = appendFormHtml.replace('bootstrapSwitch-class','bootstrapSwitch');
        $('#answer-container').append(appendFormHtml);

    }
});

<form id="cx-user-survey-questions-record-edit">
        <div class="row">
            <section class="col col-6">
                <label class="label">Select type</label>
                <label class="input">
                    <select id="answer_type" name="answer_type" class="select2 select2-hidden-accessible" data-bind="select2Binding: answer_type, select2Options: { data: listAnswerTypes, width: &quot;100%&quot;, placeholder: &quot;Select a type...&quot;}" tabindex="-1" aria-hidden="true">
                        <option value="0">Free Text</option><option value="1">Multiple</option></select><span class="select2 select2-container select2-container--default select2-container--below select2-container--open" dir="ltr" style="width: 100%;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-answer_type-container" aria-owns="select2-answer_type-results"><span class="select2-selection__rendered" id="select2-answer_type-container" title="Multiple">Multiple</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>                                            </label>
                </section>
        </div>
        <button id="add-answer-button" class="btn btn-primary pull-left" type="button">Add Answer</button>
        <button class="btn btn-success cx-btn-submit" type="submit">Save Question</button>
</form>

<div id="answer-container"></div>

<div id="cx-record-answer-form-div" class="hide">
    <div class="multiple">
        <form id="cx-record-answer-form-<#id#>" data-answer-id="<#id#>" class="cx-record-answer-form smart-form" data-edit-allowed="true">
            <section class="col col-4">
                <label class="label">Answer</label>
                <label class="input">
                    <input type="text" id="answer" name="answer" class="form-control" placeholder="Answer" data-bind="value: answer">                </label>
            </section>
        </form>
    </div>

</div>

var$addAnswerButton=$（“#添加应答按钮”）；
var newAnswerFormIndex=0；
$addAnswerButton.on（'click'，function（））{
新答案索引++；
if（$.trim（$（“#cx用户调查问题记录编辑”）.find（“#答案类型”）.val（）！=”）{
//获取表单html
var formHtml=（$（'#cx记录答案表单div.+$（'#cx用户调查问题记录编辑'）。查找（'#答案类型'）。val（））.html（）；
log（formHtml）；
var appendFormHtml=formHtml.replace（'cx-record-answer-form-'，'cx-record-answer-form-new-'+newAnswerFormIndex）；
log（appendFormHtml）；
appendFormHtml=appendFormHtml.replace（/\/g，newAnswerFormIndex）；
appendFormHtml=appendFormHtml.replace（'bootstrapSwitch-class'，'bootstrapSwitch'）；
$（“#应答容器”）.append（appendFormHtml）；
}
});

HTML标记：

var $addAnswerButton = $('#add-answer-button');
var newAnswerFormIndex =  0;

$addAnswerButton.on('click', function() {
    newAnswerFormIndex++;

    if($.trim($('#cx-user-survey-questions-record-edit').find('#answer_type').val()) != ''){
        // get form html
        var formHtml = ($('#cx-record-answer-form-div .'+$('#cx-user-survey-questions-record-edit').find('#answer_type').val()).html());
        console.log(formHtml);
        var appendFormHtml = formHtml.replace('cx-record-answer-form-<#id#>','cx-record-answer-form-new-'+newAnswerFormIndex);
        console.log(appendFormHtml);

        appendFormHtml = appendFormHtml.replace(/\<#id#>/g,newAnswerFormIndex);
        appendFormHtml = appendFormHtml.replace('bootstrapSwitch-class','bootstrapSwitch');
        $('#answer-container').append(appendFormHtml);

    }
});

<form id="cx-user-survey-questions-record-edit">
        <div class="row">
            <section class="col col-6">
                <label class="label">Select type</label>
                <label class="input">
                    <select id="answer_type" name="answer_type" class="select2 select2-hidden-accessible" data-bind="select2Binding: answer_type, select2Options: { data: listAnswerTypes, width: &quot;100%&quot;, placeholder: &quot;Select a type...&quot;}" tabindex="-1" aria-hidden="true">
                        <option value="0">Free Text</option><option value="1">Multiple</option></select><span class="select2 select2-container select2-container--default select2-container--below select2-container--open" dir="ltr" style="width: 100%;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-answer_type-container" aria-owns="select2-answer_type-results"><span class="select2-selection__rendered" id="select2-answer_type-container" title="Multiple">Multiple</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>                                            </label>
                </section>
        </div>
        <button id="add-answer-button" class="btn btn-primary pull-left" type="button">Add Answer</button>
        <button class="btn btn-success cx-btn-submit" type="submit">Save Question</button>
</form>

<div id="answer-container"></div>

<div id="cx-record-answer-form-div" class="hide">
    <div class="multiple">
        <form id="cx-record-answer-form-<#id#>" data-answer-id="<#id#>" class="cx-record-answer-form smart-form" data-edit-allowed="true">
            <section class="col col-4">
                <label class="label">Answer</label>
                <label class="input">
                    <input type="text" id="answer" name="answer" class="form-control" placeholder="Answer" data-bind="value: answer">                </label>
            </section>
        </form>
    </div>

</div>

选择类型
免费文本多路复用
添加答案
保留问题
答复

（$（“#cx记录答案表单div.+$”（“#cx用户调查问题记录编辑”）

不正确。如果要获取带有id的select值

答案类型

请使用-

$（“#cx用户调查问题记录编辑”）。查找（“#答案类型”）.val（）

var$addAnswerButton=$（“#添加应答按钮”）；
var newAnswerFormIndex=0；
$addAnswerButton.on（'click'，function（））{
新答案索引++；
if（$.trim（$（“#cx用户调查问题记录编辑”）.find（“#答案类型”）.val（）！=”）{
//获取表单html
var formHtml=（$（“#cx用户调查问题记录编辑”）.find（“#答案类型”）.val（）；
log（formHtml）；
var appendFormHtml=formHtml.replace（'cx-record-answer-form-'，'cx-record-answer-form new-'+newAnswerFormIndex）；
log（appendFormHtml）；
appendFormHtml=appendFormHtml.replace（/\/g，newAnswerFormIndex）；
appendFormHtml=appendFormHtml.replace（'bootstrapSwitch-class'，'bootstrapSwitch'）；
$（“#应答容器”）.append（appendFormHtml）；
}
})；

选择类型
免费文本多路复用
添加答案
保留问题
答复

如果

$

真的是jQuery，那么

$（“#cx记录答案表单div.”+$（“#cx用户调查问题记录编辑”）。find（“#答案类型”）.val（））

永远不会返回“html”，这是无效的-

（$（“#cx记录答案表单div.”+$（“#cx用户调查问题记录编辑”）

。您的

formHtml

未定义。@如果忽略已删除的部分，这只是“无效”的。即使没有已删除的部分，它也只会生成无效的选择器。但在这种情况下

formHtml

也不会

未定义
您获得select值的想法是正确的，但我想获得
$（“#cx记录答案表单div
div html，因此我添加了连接！