放入div时变量属性消失答案

【问题标题】：Variable attributes disapearing when put inside div放入div时变量属性消失
【发布时间】：2015-12-07 02:18:11
【问题描述】：

可能是一个简单的问题，但我似乎找不到答案。我正在动态创建一个可以分享 Twitter 链接的页面。

 var twitter = document.createElement('a');
 twitter.setAttribute('href', 'http://twitter.com/share');
 twitter.setAttribute('class', 'twitter-share-button twitter-tweet');
 twitter.setAttribute('data-text', 'I liked this image');
 etc..

然后我将它附加到我想要的 div 中，例如

   $('#doc').append('<img(miscellaneous HTML)>'+twitter)

我上面的内容有效，但出于 CSS 格式化目的，我希望带有 twitter 分享按钮的图像成为一个子块。所以我创造了这样的东西

  $('#doc').append('<div id="innerblock'+i+'"><img(miscellaneous HTML)>'+twitter+'</div>)

但是当我这样做时，似乎 twitter var 的所有属性都丢失了，只在页面上打印 http://twitter.com/share 而不是按钮。

我觉得这可能是我忘记的一个基本概念。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您正在尝试通过此代码连接一个 DOM 对象和一个字符串

 $('#doc').append('<div id="innerblock'+i+'"><img(miscellaneous HTML)>'+twitter+'</div>)

这个 twitter 变量包含一个 DOM 对象，附加块的其余部分是字符串。

试试这个：

var div = $('<div id="innerblock'+i+'"><img(miscellaneous HTML)></div>').append(twitter);
$('#doc').append(div);

【讨论】：

【解决方案2】：

我要做的不是附加 HTML，而是您可以使用 document.createElement 创建内部块 div 和 img 标签，并将 twitter 附加到 img 并将 img 附加到 div，然后再将其全部附加到#doc

【讨论】：

【解决方案3】：

你不能连接一个 sting 和一个 DOM 节点。

var div = $("<div id="innerblock'+i+'">").append("<img />").append(twitter);

或

var div = $("<div/>", {id : "innerblock" + i).append("<img />").append(twitter);

【讨论】：

【解决方案4】：

尝试将 twitter 中的 .outerHTML String 替换为 DOM 元素 Object twitter ；还在提供给.append()的字符串参数末尾添加关闭单引号'

var twitter = document.createElement('a');
 twitter.setAttribute('href', 'http://twitter.com/share');
 twitter.setAttribute('class', 'twitter-share-button twitter-tweet');
 twitter.setAttribute('data-text', 'I liked this image');
var i = 0;
  $('#doc').append('<div id="innerblock'+i+'"><img />'+twitter.outerHTML+'link</div>')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="doc"></div>

【讨论】：