时间戳

首页 > 解决方案 > JavaScript append 和 prepend 在 IE 中不起作用

javascript - JavaScript append 和 prepend 在 IE 中不起作用

问题描述

我正在尝试使用单击按钮在文本区域内附加和前置一个 HTML 块，但它在 Internet Explorer 中不起作用。

 $(document).ready(function () {
        "use strict";
       $('#export-file').click(function () {          
          document.getElementById("codeToSave").prepend('<!doctype html>\n<html> \n<head>');
          document.getElementById("codeToSave").append($.trim('</body>\n</html>'));
       });
    });


<ul class="control-list">
      <li class="controls" id="export-file" data-toggle="tooltip" title="Export " ><i class="fas fa-download"></i></li>                    
</ul>

<textarea id="codeToSave" disabled class="scrollStyle-3" ></textarea>

标签： javascriptjqueryhtmlwebweb-applications

解决方案

情侣问题。首先，当您使用本机选择器时，它们不会返回 jQuery 对象。因此，如果您想使用 jQuery 方法，您必须将找到的那些元素放入其中，$()或者只使用 jQuery 选择器方法。

其次，将html附加到textarea并没有显示它，因为它试图在将文本附加到元素之前解释文本，即使它是一个textarea。要解决这个问题，你可以通过给它一个 TextNode 来强制 jQuery 附加/前置数据。

$(document).ready(function() {
  "use strict";
  $('#export-file').click(function() {
    var $codeToSave = $("#codeToSave");
    
    $codeToSave
        .prepend(document.createTextNode('<!doctype html>\n<html> \n<head>'))
        .append(document.createTextNode($.trim('</body>\n</html>')));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="control-list">
  <li class="controls" id="export-file" data-toggle="tooltip" title="Export "><i class="fas fa-download"></i>Thing</li>
</ul>

<textarea id="codeToSave" disabled class="scrollStyle-3"></textarea>

推荐阅读