如何通过ID将外部DIV添加到追加脚本以显示其结果链接？
[英]How to Add external DIV to Append Script by ID to display its link in result?
问题描述
i javascript expert 
我的JavaScript专家
in my template i used this script which worked perfect to display html used inside append. 在我的模板中，我使用了此脚本，该脚本非常适合显示在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>
Here is the jsfiddle result: https://jsfiddle.net/83fbnwe4/7/ 这是jsfiddle结果： https ://jsfiddle.net/83fbnwe4/7/
Then whats my problem is ? 那我的问题是什么？
i want to do to add my id in my append body html structure. 我想在我的附加正文html结构中添加我的ID。
Example: i have an ID in my template. 示例：我的模板中有一个ID。 which is like this: 就像这样：
<div id="showlink"><a href="http://example.com"></div>
Now how to add this id showlink in my append body next to wrapleft so it work to display the link "example.com" in result. 现在，如何在我的附加主体中的wrapleft旁边添加此id showlink ，以便在结果中显示链接“ example.com” 。
I tried this but its not working: 我试过了，但是没有用：
<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>
Not Working; 不工作； https://jsfiddle.net/83fbnwe4/9/ i know its wrong because i am not well aware with javascript sntax, it comes as plain text...while i want to display the id showlink example.com here. https://jsfiddle.net/83fbnwe4/9/我知道这是错误的，因为我不太了解javascript sntax，它以纯文本格式出现...而我想在此处显示id showlink example.com 。 fiddle ones is not working but i am just understanding you to how to add that id inside append next to wrapleft so it display the link in result. 小提琴的那些是行不通的，但是我只是在了解您如何在wrapleft旁边的append中添加该id，以便在结果中显示链接。
to understand you better: Screenshot: http://prntscr.com/a4nks7 Or see 更好地了解您：屏幕截图： http://prntscr.com/a4nks7 ： http://prntscr.com/a4nks7或查看
to show link by id inside append 以显示ID附加链接
Note: 注意：
do not advise me to add the <div id="showlink"><a href="http://example.com"></div> directly inside append next to wrapleft like this: <div id="wrapleft"><div id="showlink"><a href="http://example.com"></div></div> I already know this, but i want to add like as above i demonstrated.
不要建议我将<div id="showlink"><a href="http://example.com"></div>直接添加到wrapleft旁边的附加内容中，例如： <div id="wrapleft"><div id="showlink"><a href="http://example.com"></div></div>我已经知道这一点，但是我想像上面演示的那样添加。
I hope someone will figure out the solution: as i explained very well in detail. 我希望有人能找出解决方案：正如我详细解释的那样。
3 个解决方案
解决方案1
1 2016-02-17 23:52:33
append takes more than just a html string. append需要html字符串。 You can use an actual DOM element object, or a jQuery object. 您可以使用实际的DOM元素对象或jQuery对象。 So get a reference to the element you want to move, a reference to the target element, and call the appropriate method 因此，获得对要移动的元素的引用，对目标元素的引用，并调用适当的方法
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 );
Demo 演示版
$(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>
If you are actually wanting to do a string concatenation, although I don't see why you would want it over the previous method shown. 如果您实际上是想进行字符串连接，尽管我不明白为什么您希望在显示的先前方法上使用它。 Just use the reference to get the html and use it in the concatenation 只需使用引用获取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();
解决方案2
0 已采纳 2016-02-18 00:04:24
This may not be exactly what you want, however, this does show how to append the existing html in the wrapleft div. 这可能不完全是您想要的，但是，这确实显示了如何在wrapleft div中附加现有的html。 If it's not what you want then you should be able to figure out how to do what you want to do from this example. 如果这不是您想要的，那么您应该能够从该示例中弄清楚如何去做。
Please note, you find the element you want to append to .find('#wrapleft') and then you append the element you desire .append($('#showlink')) 请注意，找到要添加到.find（'＃wrapleft'）的元素，然后添加所需的元素.append（$（'＃showlink'））
<body> <div id="showlink"><a href="http://example.com">showlink</a></div> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>').find('#wrapleft').append($('#showlink')); }); //]]> </script>
解决方案3
0 2016-02-18 00:52:53
If you want a copy of the link <a href="http://example.com"> in your new <div id="wrapleft"> , you can use the .html() function: JS Fiddle 1 如果要在新的<div id="wrapleft">复制链接<a href="http://example.com"> ，请使用.html()函数： JS Fiddle 1
$(document).ready(function() {
$('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft">'
+ $("#showlink").html()
+ '</div><div id="wrapright">This is text display by append</div></div></div>');
});
However, this one only copies the link and leaves the original copy and the div#showlink behind. 但是，此命令仅复制链接，而div#showlink原始副本和div#showlink 。 If you would like to get rid of them, I would suggest you this: JS Fiddle 2 如果您想摆脱它们，我建议您这样做： JS Fiddle 2
$(document).ready(function() {
var $link = $("#showlink"),
copy = $link.clone().removeAttr('style')[0].outerHTML;
// We can append the copy inside #wrapleft (all at once, as you want it to be)
$('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft">'
+ copy + '</div><div id="wrapright">This is text display by append</div></div></div>');
// Now you can remove the original #showlink from your DOM
$link.remove();
// From this point on, $('#showlink') will select your new copy
// Lets try increasing font size
$('#showlink').css('fontSize','1.5em');
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.