.html() и .append() без jQuery

Может ли кто-нибудь сказать мне, как я могу использовать эти две функции без использования jQuery?

Я использую предварительно закодированное приложение, в котором я не могу использовать jQuery, и мне нужно взять HTML из одного div и перенести его на другой с помощью JS.

Ответ 1

Чтобы скопировать 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 всегда будет истинным, поэтому вы, вероятно, можете удалить все части, которые работают, когда они ложны. Если ваше приложение имеет несколько фреймов в одном и том же домене, взаимодействующем с помощью JavaScript, вы можете захотеть сохранить его.

Если вы хотите заменить HTML, вы можете сделать это, опустошив цель и затем скопировав ее:

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

Ответ 2

Вы можете заменить

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

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

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

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

Ответ 3

.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 приведет к ошибке script, которая приведет к поломке кода. В этом случае вы захотите обернуть его try.
jQuery предлагает несколько других, менее простых ярлыков, таких как prependTo/appendTo after/before и многое другое.
/li >

Ответ 4

.html() и .append() являются функциями jQuery, поэтому без использования jQuery вы, вероятно, захотите посмотреть document.getElementById("yourDiv").innerHTML

Javascript InnerHTML

Ответ 5

Несколько лет опоздали на вечеринку, но в любом случае, вот решение:

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

Это отлично подходит для добавления html в элемент dom.

Ответ 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>