.appendChild() 点击时的 HTML 元素答案

【问题标题】：.appendChild() an HTML element on click.appendChild() 点击时的 HTML 元素
【发布时间】：2019-05-15 02:22:52
【问题描述】：

我想在单击按钮时复制整行，包括其兄弟姐妹和内容。当我单击该元素的按钮时，它会出现在控制台中，但不会附加到页面。这是我的代码：

它不显示任何错误消息。我试过 innerHTML/outerHTML 或 append() 都不起作用。

$(document).ready(function() {

    $('#addSubFBtn').on('click', function() {
        var itm = document.getElementById("trFb");
        var wrapper = document.createElement('div');
        var el = wrapper.appendChild(itm);
        document.getElementById("tbFb").append(el);
        console.log(el);
    });
});

【问题讨论】：

如果您使用开发工具检查元素 'tbFb' 是否存在任何子元素？最好在这里进行演示：jsfiddle.net

标签： javascript jquery appendchild

【解决方案1】：

似乎您正在尝试做的是在从文档中获取项目后克隆该项目。 W3schools 网站解释了如何做到这一点。查看链接：https://www.w3schools.com/jsref/met_node_clonenode.asp

克隆节点后，[appendchild] 应该可以正常工作

【讨论】：

【解决方案2】：

不确定（正如没有看到相关 HTML 所说的那样），但我发现您的逻辑存在缺陷：

var itm = document.getElementById("trFb"); 仍然存在于文档中（因此在页面中），因此您必须先检索它，然后再将其添加/移动到另一个地方。使用 .removeElement 将返回已删除的元素（如果没有元素与选择器匹配，则返回 null），因此正确的脚本应该是：

var itm=document.getElementById("trFb").parentNode.removeChild(document.getElementById("trFb")); 如此处所示要删除元素，您必须对父元素使用方法。因此，您可以将其添加到现有的任何其他元素中。对于在全局 JS 变量中创建的更具体的用途或元素（例如尚未附加的 createElement），您可以查看：document.createDocumentFragment(); 此处解释为 https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment

【讨论】：