чистый javascript dom динамическая вставка, обновление и удаление

Question

Я хочу знать наиболее эффективный способ динамического обновления, вставки или удаления элементов со страницы HTML.

В результате я могу изменить элемент input на элемент div и наоборотоснованный на действии пользователя

Answer 1

Я думаю, что вы могли бы выполнить эту задачу следующим образом (чистый JS, без использования внешних платформ):

//retrieve the <form>  
var form = document.getElementsByTagName('form')[0];

//retrieve the <input> inside the form
var input = form.getElementsByTagName('input')[0];

//create a new <div> DOM element
var newElement = document.createElement('div');

//The containing div text is equal to the input value (your case)
newElement.innerHTML = input.value;

//simple empty the form by set innerHTML = ""
form.innerHTML = "";

//append the <div> inside the form
form.appendChild(newElement);

Кстати, я предлагаю вам, если вы хотите манипулировать DOM и делать подобные вещи более простым способом, научитесь делать это с помощью фреймворков, таких как jQuery или mootools;)

Answer 2

Это общее описание:

• Создание: Вы можете создать элементы с помощью document.createElement, а затем использовать один из различных методов вставки для вставки элемента в определенном месте. положение (например, Node.appendChild). Вам необходимо сначала получить ссылки на связанные узлы.
  Большинство браузеров также поддерживают атрибут innerHTML для элементов. Вы можете установить этот атрибут в HTML (или текстовую) строку, и содержимое элемента будет соответственно обновлено.

• Обновление: Зависит от того, какие данные вы хотите обновить. Например. элемент input имеет атрибут value. Чтобы изменить значение ввода текста, сначала нужно получить ссылку на этот элемент, затем вы можете сделать element.value = 'new value'. Для контента вы можете использовать уже упомянутый атрибут innerHTML.
  Взгляните на ссылку на элемент HTML , чтобы увидеть, какие атрибуты у них есть.

• Удаление: Вы хотите Node.removeChild.

Я предлагаю также взглянуть на методы обхода DOM и знать о различиях в браузере.

Answer 3

Использование:

• element.removeChild
• element.appendChild

Используя эти методы, вы можете сохранить ссылки на элементы на случай, если вы захотите снова их поменять. Все обработчики событий на месте также останутся присоединенными к элементам.

Answer 4

Это зависит от вашего определения наиболее эффективного.

Если вы имеете в виду самый простой способ, то вы можете использовать библиотеку, такую ​​как jQuery, и делать это так:

$('form').html('<dynamic markup>');

Если выозначает наиболее эффективный способ, которым вы можете сделать следующее:

document.getElementByTagName('form').innerHTML = '<dynamic markup>';