Замена значения value до вывода html на страницу

Question

Я через AJAX получаю html, содержимое находиться в переменной res['html'].

Содержимое переменной res['html']:

<div class="blok">
        <input name="form[id]" value=""/>
        <input name="form[table]" value=""/>
        <button type="submit"></i>Сохранить</button>
        <i>Закрыть </i>
</div>

Перед тем как вывести это содержимое на страницу, мне необходимо подставить известные значения в input.

Например:

<div class="blok">
        <input name="form[id]" value="1"/>
        <input name="form[table]" value="table_name"/>
        <button type="submit"></i>Сохранить</button>
        <i>Закрыть </i>
</div>

До этого я менял эти значения, когда уже было выведено на страницу, вот таким образом:

$('input[name="form[id]"]').val('1');
$('input[name="form[table]"]').val('table_name');

Но как это сделать до вывода? Уже 2-й день пытаюсь, но не получается, подскажите как это сделать? Большое вам спасибо! )))

P.S. Получилось сделал так:

// добавил в значение ID и TableName
res['html'] = '<div class="blok">
    <input name="form[id]" value="ID"/>
    <input name="form[table]" value="TableName"/>
    <button type="submit"></i>Сохранить</button>
    <i>Закрыть </i>
</div>'

var html = res['html'];
// Нахожу ID и TableName, меняю их
var newHtml = html.toString().replace(/ID/g, '1').replace(/TableName/g, 'table_name')
$('body').append(newHtml);

Можно это сделать иначе? Не используя . replace?

var res = '<div class="blok"><input name="form[id]" value="ID"/><input name="form[table]" value="TableName"/><button type="submit"></i>Сохранить</button>    <i>Закрыть </i></div>'

var html = res;
var newHtml = html.toString().replace(/ID/g, '1').replace(/TableName/g, 'table_name')
$('body').append(newHtml);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
</body>

Answer 1

В данном случае желательно задавать значения элементам. А не писать значения в виде текста, потому что тогда возможны атаки, например при значении "><script>...</script>. То есть нужно распарсить код в элементы, и вставлять в документ эти элементы:

// парсим в элементы:    
let div = document.createElement("div");
div.innerHTML = res.html;
// смена значений инпутов:
div.querySelector('[name="form[id]"]').value = ЗНАЧЕНИЕ
// вставка элемента 'blok' на страницу:
document.body.appendChild( div.querySelector('.blok') );

На jQuery это может выглядеть так:

// парсим в элементы:    
let block = $(res.html).find('.blok');
// смена значений инпутов:
block.find('[name="form[id]"]').val( ЗНАЧЕНИЕ );
// вставка элемента 'blok' на страницу:
myForm.append( block );

БЛОГ НА HUSL

Замена значения value до вывода html на страницу

Ответы (1 шт):