jQuery append() 不适用于连接的字符串

Question

（完整代码如下）

这个

$('#' + id).parent().append('<div id="pop-up">hello</div>');

有效。但是这个

$('#' + id).parent().append('<div id="pop-up-' + id + '">hello</div>');

没有。

第一个版本有效的事实让我假设问题不是 id 变量...

所以完整代码是

function clickOnElement(id) {
    var obj = {};
    obj.clicked = String(id);
    var jsonData = JSON.stringify(obj);
    $.ajax({
        type: 'POST',
        url: '../db/RequestHandler.ashx',
        data: jsonData,
        contentType: 'application/json; charset-utf-8',
        success: function (response) {
            // Add the div for the dialog-box
            $('<div>Hello</div>', {
                "id": "pop-up" + id
            }).appendTo($('#' + id).parent());
        },
        error: function () {
            console.log("request error");
        }
    });
}

Answer 1

使用.appendTo()

.append() 和 .appendTo() 方法执行相同的任务。
主要区别在于特定于语法的内容和目标的位置。
使用 .append() 时，方法前面的选择器表达式是要插入内容的容器。
另一方面，使用 .appendTo() 时，内容先于方法，作为选择器表达式或动态创建的标记，然后插入到目标容器中。

代码示例

$('<div>Hello</div>', {
    "id": "pop-up" + id
}).appendTo($('#' + id).parent());

仅供参考，

请确保该元素存在于 DOM 中并且您将其附加到正确的选择器中。

希望这对您有所帮助。

Answer 2

使用 jQuery(html, attributes) 创建 HTML，您将避免引号混乱

$('#' + id)
    .parent()
    .append($('<div>', {
        id: "pop-up-" + id ,
        text: "hello"
    });

Answer 3

尝试以下方法

var parent = $('#' + id).parent();
var el = $('<div>', {id: "pop-up"+id,text:"hello"});
 el.appendTo(parent);

向创建的对象添加文本的正确方法是使用文本属性:

演示：https://jsfiddle.net/gx6mrqr7/

jQuery append() 不适用于连接的字符串

jQuery append() not working for concatenated String

html

jquery

append

string-concatenation