#やったこと
埋め込んだJavaScript(hoge_No.1)をJavaScriptで表示させようとした。
下記はその簡略化したソースコード(HTMLは最小限に省略)。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<script id="SVG"><![CDATA[ 〜hoge_No.1〜 ]]></script>
<script>
<![CDATA[
const SOURCE = function () {
const Elm = document.getElementById('EMBED');
const cdata = document.getElementById('SVG').firstChild;
const tNode = document.createTextNode(cdata.nodeValue);
Elm.replaceChild(tNode, Elm.firstChild);
};
(function () {
document.addEventListener('DOMContentLoaded', SOURCE, false);
}());
]]>
</script>
<title>sample</title>
</head>
<body>
<pre id="EMBED">test</pre>
</body>
</html>
#説明
当たり前の話だが、変数cdataに格納されるのはCDATA Section。
Elm.replaceChild(cdata, Elm.firstChild);
としても表示はされるが、replaceされるのはあくまでCDATA Section(console.log()で確認済)。
そこで上記ソースにある通り下記にするとテキストノードでreplaceされる。
tNode = document.createTextNode(cdata.nodeValue);
Elm.replaceChild(tNode, Elm.firstChild);
当たり前だが認識忘れそうな話。