Динамический эквивалент innerHTML?

Question

Я хочу получить innerHTML элемента, который мог быть изменен пользователем.

Итак, например, я хочу узнать состояние переключателя:

<input type="radio" name="Q_209" value="A" checked>

или

<input type="radio" name="Q_209" value="A">

В современных браузерах innerHTML просто дает исходный тег при загрузке страницы (как обсуждено здесь ): он не записывает переключательбыл проверен пользователем или нет.

Есть ли безопасный способ получить обновленный HTML?Я знаю, что есть способы получить состояние самого переключателя в Javascript, но мне хотелось бы получить полный обновленный HTML.

Спасибо!

Answer 1

Как уже упоминалось, HTML не хранит текущее состояние элементов формы . HTML определяет начальное или стандартное состояние элементов формы. DOM хранит изменчивое состояние формы.

Например, этот HTML

<input type="radio" name="Q_209" value="A" checked>

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

Изменение свойства defaultChecked появляется для обновления externalHTML.

Таким образом, если вы перебираете все элементы формы, копируя текущее значение / selectedness / selectedness в свойства defaultValue / defaultChecked / defaultSelected, вы можете получить обновленный внешний HTML, который вы ищете.

Answer 2

Дело в том, что HTML на самом деле не "обновляется". Дерево DOM есть, и это то, что вы можете видеть, но HTML как таковой остается прежним (и именно поэтому innerHTML сохраняет то же значение)

Answer 3

Насколько я знаю, фактический порядок свойств элемента HTML открыт для интерпретации браузером, поэтому нет надежного способа определить, имеете ли вы дело с <input type="radio" name="Q_209" value="A" checked> или <input checked="true" name="Q_209" value="A" type="radio">

Но вы можете получить все свойства и значения элемента с помощью оператора for ... in:

var foo = document.getElementById('form_id')['Q_209'];
var foo_properties = [];

for (var prop in foo) {
   // do something with prop and foo[prop];      
}

Это означает, что вы потенциально можете сравнить свойства, найденные в элементе, с подмножеством свойств, которые вам действительно нужны (специфические для данного конкретного тега или большей совокупности свойств "html"), чтобы получить "состояние html" элемента и сможет восстановить его или строковое представление.

var input_foo = document.getElementById('form_id')['Q_209'];
var awesome_properties = {'type':'','name':'','value':'','checked':''};
var tag = '<input ';
var properties = '';

for (var prop in foo) {
   if (prop in awesome_properties) {
      properties += ' '+prop+'="'+foo[prop]+'"';
   }
}

tag += properties;
tag += '>';

window.alert(tag);

Answer 4

Вам, вероятно, придется пройтись по дереву DOM и сгенерировать HTML самостоятельно

Answer 5

вы хотите : проверено в jQuery и

$('input[type=radio]:checked').html()