Question

我试图通过单击按钮在文本区域内追加和添加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>

Answer 1

实际上.prepend和.append都是实验技术：

ParentNode.prepend（分别为ParentNode.append）方法将一组Node对象或DOMString对象插入{{ 1}}。

但是我很确定您正在使用jQuery的.prepend和.append方法。问题是ParentNode是Element类型的对象，它不是jQuery对象！因此，您无法在其上应用document.getElementById("codeToSave")或.append。（请检查您是否想使用内置的实验方法，但我不确定您是不是。

如果要在文本区域内将HTML作为文本（而不是作为实际元素）添加，则只需更改其.prepend属性：

textContent

$(document).ready(function() {
  "use strict";
  $('#export-file').click(function() {
    
    document.getElementById("codeToSave").textContent = `
      <div class="parent">
        <div class="child">Hello World</div>
      </div>
    `;
    
  });
});

或者与jQuery一起使用方法val()：

<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></li>
</ul>

<textarea id="codeToSave" disabled class="scrollStyle-3"></textarea>

$(document).ready(function() {
  "use strict";
  $('#export-file').click(function() {
    
    $("#codeToSave").val(`
      <div class="parent">
        <div class="child">Hello World</div>
      </div>
    `.trim());
    
  });
});

Answer 2

夫妇问题。首先，当您使用本机选择器时，它们不会返回jQuery对象。因此，如果要使用jQuery方法，则必须将找到的那些元素放在$()内，或者仅使用jQuery选择器方法。

第二，将html附加到textarea不会显示它，因为它试图在将文本附加到元素之前解释文本，即使它是textarea。要解决此问题，您可以通过给jQuery一个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>

JavaScript追加和添加在IE中不起作用

2 个答案: