javascript - 如何通过 ID 添加外部 DIV 以附加脚本以在结果中显示其链接？

Question

我是 JavaScript 专家

在我的模板中，我使用了这个脚本，它非常适合显示 append 中使用的 html。

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft"></div><div id="wrapright">This is text display by append</div></div></div>');
});
//]]>
</script>

这是 jsfiddle 结果:https://jsfiddle.net/83fbnwe4/7/

那我的问题是什么？

我想在我的追加主体 html 结构中添加我的 id。

示例:我的模板中有一个 ID。是这样的:

<div id="showlink"><a href="http://example.com"></div>

现在如何在 wrapleft 旁边的附加主体中添加此 id showlink，以便在结果中显示链接 "example.com"。

我试过了，但没用:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft">'+("#showlink")+'</div><div id="wrapright">This is text display by append</div></div></div>');
});
//]]>
</script>

不工作； https://jsfiddle.net/83fbnwe4/9/我知道这是错误的，因为我不太了解 javascript 语法，它以纯文本形式出现......而我想显示 id showlink example.com这里。fiddle ones 不起作用，但我只是了解你如何在 wrapleft 旁边的 append 中添加该 id，以便它在结果中显示链接。

为了更好地了解你:截图:http://prntscr.com/a4nks7或见
to show link by id inside append

注意:

不建议我加上 <div id="showlink"><a href="http://example.com"></div>像这样直接在 wrapleft 旁边追加: <div id="wrapleft"><div id="showlink"><a href="http://example.com"></div></div>我已经知道这一点，但我想像上面演示的那样添加。

我希望有人能找出解决方案:正如我详细解释的那样。

Answer 1

append 不仅仅是一个 html 字符串。您可以使用实际的 DOM 元素对象或 jQuery 对象。因此获取对要移动的元素的引用，对目标元素的引用，并调用适当的方法

var showlink = jQuery("#showlink");
$('body').append('your previous code here');
//since the html is now in the dom you can get a reference to it
$("#wrapleft").append( showlink );

演示

$(document).ready(function() {
  $('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft"></div><div id="wrapright">This is text display by append</div></div></div>');
  var showlink = $("#showlink");
  $("#wrapleft").append( showlink );
  showlink.show(600);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="showlink" style="display:none;">
    <a href="http://www.example.com">Example</a>
</div>

如果你真的想做一个字符串连接，虽然我不明白你为什么想要它而不是前面显示的方法。只需使用引用即可获取html并在串联中使用它

var showlink = $("#showlink");
$('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft">'+(showlink[0].outerHTML)+'</div><div id="wrapright">This is text display by append</div></div></div>');
//remove the old showlink
showlink.remove();