Javascript .html（）和.append（）不带jQuery

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

我使用的是一个预编码的应用程序，我不能在其中使用jQuery，我需要从一个div获取HTML，并使用JS将其移动到另一个div。

代码：

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

示例文本
var fromContent=document.getElementById（“from”）.innerHTML；
document.getElementById（“to”）.innerHTML=fromContent；

要将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);
}

.html（）

和

.append（）

是jQuery函数，因此如果不使用jQuery，您可能需要查看

document.getElementById（“yourDiv”）.innerHTML

您可以更换

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

与

及

与

• .html（new\u html）

  可以替换为

  .innerHTML=new\u html

• .html（）

  可以替换为

  .innerHTML

• .append（）

  方法有3种模式：
  • 追加jQuery元素，这在这里是不相关的
  • 追加/移动dom元素。
    

    .append（elem）

    可以替换为

    .appendChild（elem）

  • 附加HTML代码。
    

    .append（new\u html）

    可以替换为

    .innerHTML+=new\u html

例子

var new_html='Moshi'；
var new_elem=document.createElement（'div'）；
//.html（新的html）
new_elem.innerHTML=new_html；
//.append（html）
new_elem.innerHTML+=''+new_html；
//.append（元素）
document.querySelector（'body'）.appendChild（新元素）；

笔记

不能使用innerHTML附加

标记。您必须使用

appendChild

如果您的页面是严格的xhtml，则附加非严格的xhtml将触发脚本错误，从而中断代码。在这种情况下，您可能希望使用

来包装它，请尝试

jQuery还提供了其他几种不太直接的快捷方式，如

prependTo/appendTo

之后/之前

---

派对晚了几年，但无论如何，这里有一个解决方案：

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

---

这对于将html附加到dom元素非常有效。

@trusktr-我使用的web应用程序加载了与jQuery冲突的js文件。另外，jQuery.noConflict也不起作用。一开始可能会让人感到害怕，但jQuery是用清晰的Javascript编写的。一旦理解了主要函数，就可以轻松地获取代码的任何部分而不是

$（'bar'）.html（）。这会有帮助吗？将近11k的观点，只有4张赞成票（领先的回答是17票）？奇怪的如果OP去掉“不能使用jQuery”，你会更高兴吗？你知道你可以
克隆（true）
源节点？：-）@罗布，没错。这可能会节省很多函数调用。那么我想你应该把内容从克隆中取出，并将其转储到目的地？克隆某些节点（如
s）可能会导致在将其内容添加到DOM之前获取它们的内容，但这些节点不应包含子节点，因此不应以您的方式处理额外的网络请求，除非DOM很奇怪。@RobG，将单个克隆合并到
copyHtml
中，使其变得更小。将
innerHTML
从一个节点复制到另一个节点可能会丢失信息。例如，
元素在JS中既有
值
属性，也有
默认值
属性。如果它们不同，那么您将通过重新分析丢失信息，而克隆DOM节点则不会这样做。有时，拒绝
innerHTML
执行
标记非常方便。请注意，不能使用innerHTML附加标记。你必须使用appendChild。
$("#id").append(element);

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

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

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