天道酬勤,学无止境

jQuery.clone() IE problem

I'm have some that uses jQuery.clone() to get the html of a page and then add it to a pre tag. It works correctly in Firefox and Chrome, but nothing happens in IE:

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>
$(function(){

  $('button').click(function(){
    var $clone = $('html').clone();
    $('#output').text($clone.html());
  });

});
</script>
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <button>run test</button>
  <pre id="output"></pre>
</body>
</html>

Is there any know bug with IE that prevents this, or am I doing something wrong?

(I need to clone it because I'm doing some changes to it before outputting it)

评论

If you want to just show the page text in the page, try this:

$('button').click(function(){
  $('#output').empty().html(('<html>\n  ' + $('html').html() + '\n</html>')
     .replace(/&/gm, '&amp;')
     .replace(/</gm, '&lt;')
     .replace(/>/gm, '&gt;')
     .replace(/\r/gm, '')
     .replace(/\n/gm, '<br>')
   );
});

That works for me in Chrome, Firefox, and IE8.

This seems to work in IE, Firefox & Safari. I'm calling the javascript DOM API cloneNode() method instead of jQuery's clone(). Don't know why it works. You should probably do some more browser testing.

var $scripts = $('script');            // Cache all scripts in the document

var html = $('html').get(0).cloneNode(true);  // Clone HTML using DOM API

var $html = $(html);                     // Make jQuery object from cloned HTML

$('script', $html).each(function(i) {       // Loop through scripts in $html
    this.text = $scripts.get(i).innerHTML;  //  replacing content with that
});                                         //  from the cached $scripts

$('#output').empty().text($html.html());    // Append to #output

I have noticed one big difference in what clone does in IE and others. In IE, it appears to clone everything, including script tags. Therefore if you have code inside the script tag that instantiates code, it will be instantiated again. In the case of this question it is probably encountering an infinite loop since it will continually call the code to clone itself.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • jQuery克隆问题(jQuery clone problem)
    问题 我正在尝试克隆一个div并更改此div中输入字段的名称。 它适用于大多数浏览器,但IE 7不会更改输入字段的名称属性。 演示:http://jsbin.com/iduro/7 的HTML <body> <pre></pre> <div><input value="Hello World" name="test"></div> </body> JS var lastRow = $("body div:last"), newRow = lastRow.clone(true) .show() .insertAfter(lastRow); newRow.find('input').attr("name","test2"); $("pre").text( newRow[0].innerHTML ); 结果: Firefox :(有效) <input value="Hello World" name="test2"> IE8(有效) <INPUT value="Hello World" name=test2 jQuery1273063250500="4"> IE7(错误): <INPUT value="Hello World" name=test jQuery1273063303968="4"> 如您所见,IE7的名称未更改为test2。 是否有任何明显的原因或解决方法? 回答1
  • jQuery clone problem
    I am trying to clone a div and change the names of the input fields in this div. It works great for most of the browsers but IE 7 does not change the name attribute of the input fields. Demo: http://jsbin.com/iduro/7 HTML <body> <pre></pre> <div><input value="Hello World" name="test"></div> </body> JS var lastRow = $("body div:last"), newRow = lastRow.clone(true) .show() .insertAfter(lastRow); newRow.find('input').attr("name","test2"); $("pre").text( newRow[0].innerHTML ); Results: Firefox: (works) <input value="Hello World" name="test2"> IE8 (works) <INPUT value="Hello World" name=test2
  • 清算使用jQuery(Clearing <input type='file' /> using jQuery)
    问题 是否可以使用jQuery清除<input type='file' />控制值? 我尝试了以下方法: $('#control').attr({ value: '' }); 但这不起作用。 回答1 简便:将<form>包裹在元素周围,在表单上调用reset,然后使用.unwrap()删除表单。 与该线程中的.clone()解决方案不同,您最终会在末尾使用相同的元素(包括在其上设置的自定义属性)。 经过测试,并可以在Opera,Firefox,Safari,Chrome和IE6 +中运行。 除type="hidden"之外,它还适用于其他类型的表单元素。 window.reset = function(e) { e.wrap('<form>').closest('form').get(0).reset(); e.unwrap(); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <input id="file" type="file"> <br> <input id="text" type="text" value="Original"> </form> <button onclick="reset($('#file'))"
  • jQuery clone() FireFox bug - can't submit a cloned form
    I want to add/remove dynamically forms. I'm using forms that are stored in a table, each row has form. I have 2 tables: - the one being displayed - the one surrounded by with the temporary row that I want to clone and insert into the displayed table. Everything works fine in IE but the cloned row with its form in Firefox can't be submitted. If i don't clone the row but just insert it, I can submit the form but I need to be able to reuse that row to insert it again so I need to use cloning. Html code generated with and without cloning looks the same in Firebug. How can I overcome this problem
  • 如何使用jQuery clone()和更改ID?(How to jQuery clone() and change id?)
    问题 我需要克隆id,然后在其后添加一个数字,例如id1 , id2等。每次单击克隆时,都将克隆放在ID的最新数字之后。 $("button").click(function() { $("#id").clone().after("#id"); }); 回答1 $('#cloneDiv').click(function(){ // get the last DIV which ID starts with ^= "klon" var $div = $('div[id^="klon"]:last'); // Read the Number from that DIV's ID (ie: 3 from "klon3") // And increment that number by 1 var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1; // Clone it and assign the new ID (ie: from num 4 to ID "klon4") var $klon = $div.clone().prop('id', 'klon'+num ); // Finally insert $klon wherever you want $div.after( $klon.text('klon'+num) )
  • 使用JavaScript复制元素(及其样式)(Duplicating an element (and its style) with JavaScript)
    问题 对于我正在实现的JavaScript库,我需要克隆一个元素,该元素具有与原始样式完全相同的应用样式。 尽管我已经对JavaScript有了相当不错的了解,但作为一种编程语言,在开发它的同时,我仍然是DOM脚本新手,因此,关于如何实现这一点的任何建议都将非常有帮助(必须这样做)而不使用任何其他JavaScript库)。 提前非常感谢您。 编辑: cloneNode(true)不克隆元素的计算样式。 假设您有以下HTML: <body> <p id="origin">This is the first paragraph.</p> <div id="destination"> <p>The cloned paragraph is below:</p> </div> </body> 和一些样式,如: body > p { font-size: 1.4em; font-family: Georgia; padding: 2em; background: rgb(165, 177, 33); color: rgb(66, 52, 49); } 如果您只是克隆元素,则使用类似以下内容的方法: var element = document.getElementById('origin'); var copy = element.cloneNode(true); var
  • Jquery - Advanced .clone()
    I started from here jQuery clone chained selects The answers by Paulj Version 1: http://jsfiddle.net/m4JTQ/2/ Version 2 (this is a modified version getting rid of the i iterator: http://jsfiddle.net/Zf7xb/1/ It works perfectly. But now im looking for more dificult. The new scenario is: ----Group1 : [+] [-]------------------------------- ----Subgroup : [+] [-] ------------ --Chile | Santiago | Chiñihue --Argentina | San Juan | Rawson --Argentina | San Juan | Rawson (cloned) ----------------------------------- ---------------------------------------------------- If i click at [+] on subgroup it
  • jQuery 克隆链式选择(jQuery clone chained selects)
    问题 我刚开始:http://jsfiddle.net/FJFFJ/1/(由 Chain 使用 JQuery 动态创建下拉列表) 这真的很好,但现在我需要改变一点:克隆最后一组选择。 IE。: +- Argentina | San Juan | Rawson Chile | Santiago | Chiñihue 然后,如果我单击“+”,它将克隆 Chile | Santiago | Chiñihue 而不是第一个。 回答1 这实际上是一个比我想象的更难的问题。 显然,当您克隆一组 SELECT 元素时,它无法更改为未显示的内容。 我花了大约一个小时左右才弄清楚到底发生了什么,很好的挑战,谢谢! 我最终做的是克隆您的模板并手动更改值并手动调用“更改”事件,以便在辅助和三元 SELECT 元素中可以使用正确的选项。 版本 1:http://jsfiddle.net/m4JTQ/2/ 版本 2(这是一个去掉i迭代器的修改版本:http://jsfiddle.net/Zf7xb/1/ 这是 jsfiddle 最终消失的代码。 // Version 1 $(function() { // Iterator for the dupe ids var i = 0; $('#clone').click(function() { // put the clone() into cloned var
  • jQuery clone chained selects
    I just started from: http://jsfiddle.net/FJFFJ/1/ (by Chain dynamically created dropdowns with JQuery) It's really good but now I need to change a bit: clone the last group of selects. ie.: +- Argentina | San Juan | Rawson Chile | Santiago | Chiñihue Then, if I click at "+", it will clone Chile | Santiago | Chiñihue instead of the first one.
  • jqGrid:使用多种方法过滤数据(jqGrid: using multiple methods to filter data)
    问题 我的要求是显示一个包含多个过滤器的页面以应用于网格数据。 假设我们在谈论订单,并且订单具有以下属性 public class Order { public int OrderID public DateTime OrderDate public DateTime ShipmentDate public int OrderTotal public int OrderStatus } 在jqgrid对象中,我正在显示除OrderStatus之外的所有属性 要求是创建一个具有以下内容的视图 左侧的jqGrid 右侧的面板 用户在右侧面板中将看到代表每个可能的OrderStatus值的复选框列表,并且他想使用两种方法进行搜索(例如,选中复选框“ Shipped Orders”,然后使用“ Amount”大于一个值来过滤网格) 我已经在jqGrid对象中配置了高级过滤器(multisearch multiplesearch:true ),并且我能够创建结合字段和逻辑运算符的复杂过滤器。 关于如何在用户按下搜索按钮时甚至可以从右侧面板提交数据的任何想法? 更新1 : 序言:Oleg示例很棒,但不幸的是不符合我的客户的要求:( @Oleg:我不明白你为什么这么认为: 如果数据不在网格之外,则将仅在右侧窗格中显示所选行的订单详细信息。 因此,用户将不会对数据有很好的了解。
  • 是否可以在JavaScript / JQuery中克隆html元素对象?(Is it possible to clone html element objects in JavaScript / JQuery?)
    问题 我正在寻找一些有关如何解决我的问题的技巧。 我在表中有一个html元素(如选择框输入字段)。 现在,我想复制对象并从副本中生成一个新对象,并使用JavaScript或jQuery生成一个对象。 我认为这应该会以某种方式起作用,但目前我还是有点头绪。 这样的东西(伪代码): oldDdl = $("#ddl_1").get(); newDdl = oldDdl; oldDdl.attr('id', newId); oldDdl.html(); 回答1 使用您的代码,您可以使用cloneNode()方法在普通的JavaScript中执行以下操作: // Create a clone of element with id ddl_1: let clone = document.querySelector('#ddl_1').cloneNode( true ); // Change the id attribute of the newly created element: clone.setAttribute( 'id', newId ); // Append the newly created element on element p document.querySelector('p').appendChild( clone ); 或使用jQuery clone()方法
  • How can I Clone Chosen Plugin
    I wanted to use http://harvesthq.github.com/chosen/ witch jquery clone function: <script type="text/javascript"> $(function(){ var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>'; $('a.add').relCopy({ append: removeLink}); }); </script> <form method="post" action=""> <div id="cloner"> <p class="clone"> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery(".chzn-select").data("placeholder","Search...").chosen(); }); </script> <select data-placeholder="Search..." name="actor_name[]" class=
  • jquery 克隆组合框无法运行(jquery clone combo box not able to function)
    问题 我有下表,当我按下第一个按钮时,我调用 jquery 来克隆第一行并添加一个新行。 <table id='vehReg' class='table table-striped table-bordered bootstrap-datatable' style='font-size:10px;table-layout: fixed;'> <thead> <tr> <th style='width: 10%;'>No.</th> <th style='width: 30%;'>Sel</th> <th style='width: 20%;'>Desc.</th> <th style='width: 18%;'><input type= 'button' value='Add Row' id='addRow()' /> <input type='hidden' value='0' id='totalRows' name='totalRows' /></th> </tr> </thead> <tbody> <tr> <td> 1 </td> <td> <select class='sSelect' data-rel='chosen' style='font-size:10px;max-width:80%;'> </select> <br\><p style='color
  • JQuery clone() 和 append()(JQuery clone() and append())
    问题 我有一个简单的表: <table id='table_actions'"> <tbody class='actions_body'> <tr> <td colspan=2 class="taskname"><strong>1. </strong><span name='taskname'>name</span></td> </tr> <tr> <td>Действие: </td> <td> <select name='action_action'> <option value="1">Consult</option> <option value="2">Activate</option> <option value="3">Connect</option> </select> </td> </tr> <tr> <td><button id='addaction' class="btn">Добавить действие</button></td> <td></td> </tr> </tbody> </table> 和 JQuery 代码: $('#addaction').click(function() { $('.actions_body tr:not(:last)').clone() .insertBefore($('#table_actions tr:last'))
  • JQuery 自动完成和克隆(JQuery AutoComplete and Clone)
    问题 我在使用 jQuery 克隆时尝试将 jQuery AutoComplete 应用于表中的多行时遇到问题。 AutoComplete 在第一行上工作,但在将其他行添加到表中时无法工作。 到目前为止,我有以下几点: HTML表: <table class="table" cellspacing="0" id="myTable"> <tr> <th width="40%">Item</th> <th width="60%">Description</th> </tr> <tr> <td>input name="product_title" id="product_title" type="text"><td> <td><textarea name="product_description" id="product_description"></textarea></td> </tr> </table> <input type="button" value="Add Row" onclick="javascript:addRow()"> 克隆脚本: function addRow(){ $('#myTable tr:last').clone(true).insertAfter('#myTable tr:last'); $('#myTable tr:last input').val(
  • 如何克隆所选插件(How can I Clone Chosen Plugin)
    问题 我想使用http://harvesthq.github.com/chosen/ witch jquery克隆函数: <script type="text/javascript"> $(function(){ var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>'; $('a.add').relCopy({ append: removeLink}); }); </script> <form method="post" action=""> <div id="cloner"> <p class="clone"> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery(".chzn-select").data("placeholder","Search...").chosen(); }); </script> <select data-placeholder="Search..." name="actor_name[]" class="chzn-select" style=
  • jQuery clone()不克隆事件绑定,即使使用on()(jQuery clone() not cloning event bindings, even with on())
    问题 我创建了一系列用于移动Web应用程序的自定义jQuery事件。 他们工作得很好,已经过测试。 但是,我遇到了一个小问题,难以理解。 我在DOM中的几个元素上使用了.clone() ,其中包含一个按钮。 该按钮绑定了一些自定义事件(这些事件使用.on()绑定),但是。 不幸的是,当我使用jQuery的.clone() ,绑定没有保留,我必须再次添加它们。 之前有人遇到过这种情况吗,有人知道有可能解决此问题吗? 我认为使用.on()应该保留对现在或将来存在的元素的绑定? 回答1 我认为您应该使用.clone()方法的重载: $element.clone(true, true); clone([withDataAndEvents] [,deepWithDataAndEvents]) withDataAndEvents :一个布尔值,指示是否应将事件处理程序和数据与元素一起复制。 默认值为false。 deepWithDataAndEvents :一个布尔值,指示是否应复制克隆元素的所有子级的事件处理程序和数据。 默认情况下,其值与第一个参数的值匹配(默认为false)。 请注意, .on()实际上不会将事件绑定到目标,而是绑定到您要委派的元素。 因此,如果您有: $('#container').on('click', '.button', ...); 这些事件实际上已绑定到
  • 每次点击 jQuery 克隆 div(jQuery clone div every time clicked)
    问题 我有一个简单的表单,并且有一个按钮可以在单击时克隆我的表单。 问题是,当我第一次单击按钮时,它工作正常,但下次单击时它会附加许多 div。 有没有办法每次点击都一一复制? 这是我的片段: $(document).ready(function() { $(".Add").click(function() { $(".formi").clone().insertAfter(".formi:last"); }); }); .formi { border: 1px solid #000; width: 50%; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <span class="Add">Add+</span> <div class="all"> <form class="formi"> <input type="text" placeholder="name" /> <select name="cars"> <option value="">one</option> <option value="">two</option> </select> <button type="submit">ok</button> </form> </div>
  • jQuery clone duplicate IDs
    I have an HTML element with a large collection of unordered lists contained within it. I need to clone this element to place elsewhere on the page with different styles added (this is simple enough using jQuery). $("#MainConfig").clone(false).appendTo($("#smallConfig")); The problem, however, is that all the lists and their associated list items have IDs and clone duplicates them. Is there an easy way to replace all these duplicate IDs using jQuery before appending?
  • Jquery clone-able inputs foreach overwrites values
    I'm currently creating a clone-able id input field.. the only problem is on submit after validating the id it displays the same values for all duplicates in the console. what I'm trying to achieve is simply to clone the field make it run through the validation and on submit return the values for each cloned field in JSON. Any Help greatly appreciated. Js Fiddle: http://jsfiddle.net/dawidvdh/tBYSA/4/ and then the code: jQuery - //Clone Tracking var g_counter = 1; var d_counter = 1; var dependant = ["dependant"]; var group; //Clone Tracking //General Variables var input_groups = ["group-1"]; var