JavaScript append 和 prepend 在 IE 中不起作用答案

【问题标题】：JavaScript append and prepend not working in IEJavaScript append 和 prepend 在 IE 中不起作用
【发布时间】：2018-12-08 18:59:33
【问题描述】：

我正在尝试通过单击按钮在文本区域内附加和前置一个 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>

【问题讨论】：

你为什么不关闭你的标签？
Prepend 需要节点，而不是字符串。这可能是你问题的一部分。另外，你想做什么？我怀疑你做错了。

标签： javascript jquery html web web-applications

【解决方案1】：

其实.prepend和.append都是实验技术：

ParentNode.prepend（分别为ParentNode.append）方法在ParentNode 的第一个孩子之前（分别在最后一个孩子之后）插入一组Node 对象或DOMString 对象。

但我很确定您正在考虑使用 jQuery 的 .prepend 和 .append 方法。问题是document.getElementById("codeToSave") 是Element 类型的对象，它不是jQuery 对象！因此，您不能在其上应用.append 或.prepend。（如果你想使用内置的实验方法，但我不确定你是否愿意。

如果您想在文本区域内将 HTML 添加为文本（而不是实际元素），您只需更改其 textContent 属性：

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

<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>

或者使用 jQuery 使用方法val():

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

<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 ">Click Here<i class="fas fa-download"></i></li>
</ul>

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

【讨论】：

【解决方案2】：

几个问题。首先，当您使用本机选择器时，它们不会返回 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>

【讨论】：