没有使用jQuery的.html()和.append()方法

Question

有人可以告诉我如何在不使用jQuery的情况下使用这两个函数吗？

我正在使用一个预编码应用程序，无法使用jQuery，并且我需要使用JS将一个div中的HTML移到另一个div中。

- yeeha1

---

@trusktr - 我使用的Web应用程序加载了一堆与jQuery冲突的js文件，而且jQuery.noConflict不起作用。 - yeeha1

起初可能会让人感到害怕，但是jQuery是用清晰的Javascript编写的。一旦您了解了主要功能，您就可以轻松地抓取代码的任何部分。 - Mic

你可以为jQuery分配一个新的标识符，例如，你可以使用foo('bar').html();而不是$('bar').html();。这样会有帮助吗？ - trusktr

近11000次浏览量，只有4个赞（而且领先的答案有17个）？奇怪。如果OP去掉“不能使用jQuery”，你会更开心吗？ - ruffin

Answer 1

你可以替换。

var content = $("#id").html();

使用

var content = document.getElementById("id").innerHTML;

和

$("#id").append(element);

使用

document.getElementById("id").appendChild(element);

- Albireo

Answer 2

• .html(new_html)可以被替换为.innerHTML=new_html
• .html()可以被替换为.innerHTML
• .append()方法有3种模式：
  • 附加一个jQuery元素，这里不相关。
  • 添加/移动一个dom元素。
    .append(elem)可以被替换为.appendChild(elem)
  • 添加HTML代码。
    .append(new_html)可以被替换为.innerHTML += new_html

例子

var new_html = '<span class="caps">Moshi</span>';
var new_elem = document.createElement('div');
// .html(new_html)
new_elem.innerHTML = new_html;
// .append(html)
new_elem.innerHTML += ' ' + new_html;
// .append(element)
document.querySelector('body').appendChild(new_elem);

注意事项

1. 使用innerHTML无法添加<script>标签。您需要使用appendChild方法。

2. 如果您的页面是严格xhtml格式，追加非严格xhtml代码将触发脚本错误并破坏代码。这种情况下，您可以使用try语句包裹它。

3. jQuery提供了其他几个不太直接的快捷方式，例如prependTo/appendTo, after/before,等等。

- oriadam

---

请注意，您无法使用innerHTML附加<script>标记。您必须使用appendChild。 - oriadam

Answer 3

要将一个 div 中的 HTML 复制到另一个 div 中，只需使用 DOM。

function copyHtml(source, destination) {
  var clone = source.ownerDocument === destination.ownerDocument
      ? source.cloneNode(true)
      : destination.ownerDocument.importNode(source, true);
  while (clone.firstChild) {
    destination.appendChild(clone.firstChild);
  }
}

对于大多数应用程序来说，inSameDocument 总是为 true，因此您可以省略当它为 false 时起作用的所有部分。如果您的应用程序具有通过 JavaScript 相互交互的同一域中的多个框架，则可能需要保留它。

如果您想替换 HTML，则可以通过清空目标并将其复制到其中来实现：

function replaceHtml(source, destination) {
  while (destination.firstChild) {
    destination.removeChild(destination.firstChild);
  }
  copyHtml(source, destination);
}

- Mike Samuel

---

你知道你可以直接使用 clone(true) 克隆源节点吗？ :-) - RobG

@RobG，没错。这样做可能会节省很多函数调用。然后我猜你只需要将克隆体中的内容取出并转储到目标位置？克隆某些节点（如<img>）可能会导致它们的内容在添加到DOM之前被获取，但是这些节点不应该包含子节点，因此除非DOM很奇怪，否则按照你的方式进行操作不应该存在额外的网络请求的边角情况。 - Mike Samuel

@RobG 将单个克隆合并到 copyHtml 中，使其变得更小了。 - Mike Samuel

Answer 4

几年晚了，但无论如何，这里提供一种解决方案：

document.getElementById('your-element').innerHTML += "your appended text";

这对于向DOM元素追加HTML来说非常有效。

- Fennek

Answer 5

.html()和.append()是jQuery函数，因此如果不使用jQuery，您可能需要查看document.getElementById("yourDiv").innerHTML

JavaScript InnerHTML

- Neil Knight

---

复制innerHTML从一个节点到另一个节点可能会丢失信息。例如，<input>元素在JS中既有value属性，又有defaultValue属性。如果它们不同，那么通过重新解析你将会丢失信息，而通过克隆DOM节点则不会。另一方面，有时候拒绝innerHTML执行<script>标签的作用也是非常方便的。 - Mike Samuel

Answer 6

代码：

<div id="from">sample text</div>
<div id="to"></div>

<script type="text/javascript">
var fromContent = document.getElementById("from").innerHTML;
document.getElementById("to").innerHTML = fromContent;
</script>

- Billy