Javascript jquery值正在更改为未定义和"&引用；与控制台输出相矛盾

我正在尝试使用jquery更改两个输入框的值。一个是隐藏的，另一个是可见的。我使用jquery从页面上的其他元素获取信息，并将文本存储到两个变量中，

optID

和

oldOpt

。然后将变量放入字符串中，以创建一个小的html表单。例如：

var someVar = someInfo;
var formPiece = $('<input value="' + someVar + '" type=text>';

首先，控制台为optID写入正确的值：

#opt0

以及oldOpt的正确输出：

新选项

以及更改值的正确输出。
然后
它写入

“#未定义”

和

”

。我不明白为什么，但当我检查页面的源代码时，我试图更改的值与

“#undefined”

和

“

匹配
然后

---

它写到我试图更改的输入值是

“#未定义”

和

”

。有人能帮我理解最后4行是从哪里来的吗？

我会尝试

console.log（这个）如
此
不是您认为应该的。看看它返回了什么。@Papa
console.log（这个）输出：
我就是这么想的？但是当奇怪的输出开始时，它会打印出
Hmm。奇怪的是，它会丢失
id=“opt0”
attAttribute。代码中正在删除它的地方一定发生了其他事情。
是通过脚本还是在html中创建的？是的，它是通过脚本创建的。现在我在看它，有两个
s。是时候清理一下了：）双重
是个问题，太尴尬了。谢谢你，伙计！！
$(document).on('click', '.optText', function() {

    var optID = '#' + $(this).attr('id');
    var oldOpt = $(optID + ":first-child").text();

    console.log(optID);
    console.log(oldOpt);

    var editOptForm = $('<form>' +
            '<input type=text value=' + optID + ' name=targetOpt style="display: none;">' +
            '<div>Insert New Option</div>' +
            '<input name=optInput type=text value="' + oldOpt + '"></input>' +
            '<div id=qSubButton>change</div></form>').hide();


    $('#editorContent').hide();
    $('#editorContent').html(editOptForm);
    editOptForm.fadeIn('slow');
    $('#editorContent').show('slow');
    console.log("value of thing 1 i'm trying to change: " + $('input[name=targetOpt]').val());
    console.log("value of thing 2 i'm trying to change: " + $('input[name=optInput]').val());
});

"#opt0" 
"New Option" 
"value of thing 1 i'm trying to change: #opt0" 
"value of thing 2 i'm trying to change: New Option" 
"#undefined" 
"" 
"value of thing 1 i'm trying to change: undefined" 
"value of thing 2 i'm trying to change: undefined"