Question

有谁能告诉我如何在不使用jQuery的情况下使用这两个函数？

我正在使用一个预先编码的应用程序，我无法使用jQuery，我需要从一个div获取HTML，并使用JS将其移动到另一个。

Answer 1

您可以替换

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

与

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

和

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

与

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

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

注释

您无法使用innerHTML附加标记。你必须使用appendChild。
如果你的页面是严格的xhtml，附加一个非严格的xhtml会触发一个会破坏代码的脚本错误。在这种情况下，您可能希望用try包装它。
jQuery提供了其他一些不那么简单的快捷方式，例如prependTo/appendTo after/before and more.
无法使用<script>附加innerHTML个代码。您必须使用appendChild

Answer 3

要将HTML从一个div复制到另一个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始终是真的，因此当错误时，您可能会忽略所有功能部件。如果您的应用在同一个域中有多个框架通过JavaScript进行交互，则可能需要将其保留在其中。

如果要替换HTML，可以通过清空目标然后复制到目标来实现：

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

Answer 4

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

Javascript InnerHTML

Answer 5

聚会迟到几年，但无论如何，这是一个解决方案：

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

这适用于将html附加到dom元素。

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>

没有jQuery的.html（）和.append（）

6 个答案:

实施例

注释