Javascript .html() 和 .append() 没有 jQuery

.html() and .append() without jQuery

提问by yeeha1

Can anyone tell me how can I use these two functions without using jQuery?

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

I am using a pre coded application that I cannot use jQuery in, and I need to take HTML from one div, and move it to another using JS.

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

采纳答案by Mike Samuel

To copy HTML from one div to another, just use the DOM.

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

For most apps, inSameDocumentis always going to be true, so you can probably elide all the parts that function when it is false. If your app has multiple frames in the same domain interacting via JavaScript, you might want to keep it in.

对于大多数应用程序来说，inSameDocument总是正确的，所以当它为错误时，您可能可以省略所有起作用的部分。如果您的应用在同一个域中有多个框架通过 JavaScript 进行交互，您可能希望将其保留在其中。

If you want to replace HTML, you can do it by emptying the target and then copying into it:

如果要替换 HTML，可以通过清空目标然后复制到其中来完成：

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

回答by Albireo

You can replace

你可以更换

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

with

和

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

and

和

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

with

和

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

回答by oriadam

• .html(new_html)can be replaced by .innerHTML=new_html
• .html()can be replaced by .innerHTML
• .append()method has 3 modes:
  • Appending a jQuery element, which is irrelevant here.
  • Appending/Moving a dom element.
    .append(elem)can be replaced by .appendChild(elem)
  • Appending an HTML code.
    .append(new_html)can be replaced by .innerHTML+=new_html

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

Examples

例子

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

Notes

笔记

1. You cannot append tags using innerHTML. You'll have to use appendChild.

2. If your page is strict xhtml, appending a non strict xhtml will trigger a script error that will break the code. In that case you would want to wrap it with try.

3. jQuery offers several other, less straightforward shortcuts such as prependTo/appendToafter/beforeand more.

4. One cannot append <script>tags using innerHTML. You'll have to use appendChild

1. 您不能使用 innerHTML 附加标签。你必须使用appendChild。

2. 如果您的页面是严格的 xhtml，附加一个非严格的 xhtml 将触发一个脚本错误，这将破坏代码。在这种情况下，您可能希望用try.

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

4. 不能<script>使用innerHTML. 你必须使用appendChild

回答by Neil Knight

.html()and .append()are jQuery functions, so without using jQuery you'll probably want to look at document.getElementById("yourDiv").innerHTML

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

Javascript InnerHTML

Javascript 内部 HTML

回答by Fennek

Few years late to the party but anyway, here's a solution:

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

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

This works just fine for appending html to a dom element.

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

回答by Billy

Code:

代码：

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