omachizura

仕事メモ、役に立ったスキルをまとめています。


文字列をhtmlの要素(DOM element)に変換する

例えばajaxなどでサーバから下記のような文字列のデータがレスポンスされたとします。

var str = '<input type="hidden" id="hidTest1" value="abc"><input type="hidden" id="hidTest2" value="cde">';

ここでhidTest1のvalueを取得したい場合、document.getElementById('hidTest1')として取得したいところですが、strは文字列なので、htmlの要素に変換する必要があります。

下記のようにすれば、htmlの要素として、document.getElementById('hidTest1')で取得することができます。

var str = '<input type="hidden" id="hidTest1" value="abc"><input type="hidden" id="hidTest2" value="cde">';
var div = document.createElement('div');
div.style.display = 'none';
div.innerHTML = str; //html要素に変換
document.body.appendChild(div); //bodyに追加
console.log(document.getElementById('hidTest1').value); //abc
console.log(document.getElementById('hidTest2').value); //cde
document.body.removeChild(div); //bodyから削除