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