Пример:JavaScript - Append() не присоединяя кнопку, но текст
var buttonHTML = "<button>MyButton</button>";
document.getElementById("myDiv").append(buttonHTML);
В этом случае функция заканчивает Добавляя текст в DIV.
Однако, если я делаю то же самое с JQ:
$("#myDiv").append(buttonHTML);
В этом случае он будет на самом деле добавить кнопку. Теперь по разным причинам я должен использовать простой JS (не JQ).
У кого-нибудь есть идеи?
Это потому, что ваш var buttonHTML - это всего лишь строка текста, если вы добавите ее как дочерний элемент, она создаст DOM textNode, а не elementNode. То, что вы хотите сделать, а не что-то вдоль линий следующее:
var buttonHTML = document.createElement("button");
var buttonText = document.createTextNode("MyButton");
buttonHTML.appendChild(buttonText);
document.getElementById("myDiv").appendChild(buttonHTML)
Я не знаю, как он работал с вами и добавляется элемент как текст здесь, потому что нет никакой функции .append в чистом JS
но я согласен с тем, что @Sam Judge said in his answer, но хотелось бы отметить, что вы можете сделать это с помощью JavaScript без создания узлам один за другим с помощью яваскрипта функции Element.insertAdjacentHTML()
insertAdjacentHTML() разбирает указанный текст в HTML или XML и вставляет результирующие узлы в дерево DOM в указанной позиции. Он не повторяет элемент, на котором он используется, и поэтому он не повреждает существующие элементы внутри элемента. Это позволяет избежать дополнительного шага сериализации, делая его намного быстрее, чем прямое управление 0HTML .
И вы также можете сделать то же самое с помощью .innerHTML, но наверняка вам нужно будет сохранить то, что уже внутри, чтобы добавить эффект добавления.
Hi. Спасибо за ответ. Я просто подумал об этом несколько минут назад. –
Наверное, мне было любопытно, почему JQ относится к этому по-другому, но опять же это не имеет большого значения. Еще раз спасибо за подтверждение! –
Ну, jQuery - это просто библиотека, которую вы можете использовать, поэтому, как она относится к DOM, это сообщество, которое написало это, а не любую официальную спецификацию. Обычно это намного более интуитивно понятное, чем vanilla JS, но использование vanilla JS, чтобы вы могли ознакомиться с DOM, - хорошая идея, и я рекомендую это высоко! –