JQuery append() 不追加答案

【问题标题】：JQuery append() doesn't appendJQuery append() 不追加
【发布时间】：2015-08-03 02:20:27
【问题描述】：

我有这样的html结构：

<div id="things">
    <div class="whatever">
        <div class="frame">content</div>
        <div class="frame">content</div>
        <div class="frame">content</div>
    </div>
</div>

我得到了带有 JQuery 脚本的 JS，该脚本在点击该页面上的按钮时起作用：

function intsaver(){

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", "intsaver.php", true);
    var tosf = $('<div></div>');
    $("#things").find(".frame").each(function(){
        tosf.append($(this).innerHTML);
        alert(''+tosf);
    });
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("data=" + tosf.innerHTML);
}

我可以在调试器中看到this 的内容，它们正是我想要的。但是tosf 仍然是undefined，在服务器端我收到undefined。

我尝试了一些方法，例如，我附加了this 本身。结果，div 从页面上消失了，但tosf 仍然是undefined。

我相信我犯了一些明显的错误。

【问题讨论】：

你试过了吗 var tosf = $('div'); ?我不明白你为什么使用'
'。我无法想象这会奏效。
@SylviaStuurman 这是在 JQuery 中创建新元素的方法。
哦，抱歉，我没有意识到这一点。

标签： javascript jquery html append

【解决方案1】：

更多解释“为什么.innerHTML”不起作用。正如答案中所述，$(this).innerHTML 不起作用，因为 jQuery 没有该属性。但是，如果您调整代码，您也可以从 .innerHTML 中受益。如果你用$(element) 包装一个元素，它会创建jQuery 特定对象，如果你想使用.innerHTML，你需要从中获取元素，例如：$(this)[0].innerHTML。由于this 是该jQuery 数组中的唯一元素，因此this.innerHTML 就足够了，而无需创建$(this)。所以你的代码可以是：

function intsaver(){

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "intsaver.php", true);
var tosf = $('<div></div>');
$("#things").find(".frame").each(function(){
    tosf.append(this.innerHTML);
    alert(''+tosf);
});
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("data=" + tosf[0].innerHTML);}

【讨论】：

【解决方案2】：

改变

tosf.append($(this).innerHTML);

收件人

 tosf.append($(this).html());//$(this) a jQuery object

或者

tosf.append(this.innerHTML);//this a dom object

$(this) 是 jQuery object 而不是 dom object 没有属性 innerHTML。使用 .html() 代替。

【讨论】：

【解决方案3】：

$(this).innerHTML 应该是 $(this).html(); 和 tosf.innerHTML 应该是 tosf.html()

原因是tosf 和$(this) 是jQuery 风格，而innerHTML 是纯javascript。

【讨论】：

【解决方案4】：

试试

function intsaver() {

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", "intsaver.php", true);
    var tosf = $('<div></div>');
    $("#things").find(".frame").each(function () {
        tosf.append(this.innerHTML); //innerHTML is a property dom element
        alert('' + tosf);
    });
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("data=" + tosf.html()); //tosf is a jQuery object os call .html()
}

【讨论】：